当前位置：首页 > JavaScript

js实现表格在线制作

2026-04-04 17:18:51JavaScript

使用原生JavaScript实现表格在线制作

通过DOM操作创建可编辑表格结构

const table = document.createElement('table');
table.id = 'editableTable';
table.style.border = '1px solid black';
document.body.appendChild(table);

添加表头生成功能

function addHeader() {
  const thead = table.createTHead();
  const row = thead.insertRow();
  const headers = ['姓名', '年龄', '操作'];

  headers.forEach(text => {
    const th = document.createElement('th');
    th.textContent = text;
    row.appendChild(th);
  });
}

实现动态添加行功能

function addRow() {
  const tbody = table.querySelector('tbody') || table.createTBody();
  const row = tbody.insertRow();

  ['name', 'age'].forEach(type => {
    const cell = row.insertCell();
    const input = document.createElement('input');
    input.type = type === 'age' ? 'number' : 'text';
    cell.appendChild(input);
  });

  const actionCell = row.insertCell();
  const delBtn = document.createElement('button');
  delBtn.textContent = '删除';
  delBtn.onclick = () => tbody.removeChild(row);
  actionCell.appendChild(delBtn);
}

使用HTML5的contenteditable属性实现即时编辑

创建可编辑表格结构

<table id="editableTable" border="1">
  <thead>
    <tr>
      <th contenteditable="true">列1</th>
      <th contenteditable="true">列2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td contenteditable="true"></td>
      <td contenteditable="true"></td>
    </tr>
  </tbody>
</table>
<button onclick="addEditableRow()">添加行</button>

实现动态行添加

function addEditableRow() {
  const tbody = document.querySelector('#editableTable tbody');
  const newRow = document.createElement('tr');

  for(let i=0; i<2; i++) {
    const td = document.createElement('td');
    td.contentEditable = true;
    newRow.appendChild(td);
  }

  tbody.appendChild(newRow);
}

使用第三方库Handsontable实现专业表格

引入Handsontable库

<link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script>

<div id="hot"></div>

初始化表格实例

const container = document.getElementById('hot');
const hot = new Handsontable(container, {
  data: [['', '']],
  colHeaders: true,
  rowHeaders: true,
  contextMenu: true,
  height: 300,
  width: 600,
  licenseKey: 'non-commercial-and-evaluation'
});

实现表格数据导出功能

添加导出为CSV功能

function exportToCSV() {
  let csv = [];
  const rows = document.querySelectorAll('#editableTable tr');

  rows.forEach(row => {
    const rowData = [];
    row.querySelectorAll('th, td').forEach(cell => {
      rowData.push(cell.textContent);
    });
    csv.push(rowData.join(','));
  });

  const csvContent = csv.join('\n');
  const blob = new Blob([csvContent], {type: 'text/csv'});
  const url = URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = 'table_data.csv';
  link.click();
}

实现表格样式定制

添加CSS样式控制

js实现表格在线制作

#editableTable {
  border-collapse: collapse;
  width: 100%;
}

#editableTable th, #editableTable td {
  border: 1px solid #ddd;
  padding: 8px;
  min-width: 100px;
}

#editableTable th {
  background-color: #f2f2f2;
  text-align: left;
}

#editableTable tr:nth-child(even) {
  background-color: #f9f9f9;
}