js实现动态表格

动态表格实现方法

创建HTML结构

在HTML中定义一个容器元素用于放置动态表格，通常使用<div>或直接使用<table>标签：

<div id="tableContainer"></div>
<!-- 或 -->
<table id="dynamicTable"></table>

基础表格生成

通过JavaScript动态创建表格元素并插入数据：

function createTable(data) {
  const table = document.createElement('table');
  const thead = document.createElement('thead');
  const tbody = document.createElement('tbody');

  // 创建表头
  const headerRow = document.createElement('tr');
  Object.keys(data[0]).forEach(key => {
    const th = document.createElement('th');
    th.textContent = key;
    headerRow.appendChild(th);
  });
  thead.appendChild(headerRow);

  // 创建表格内容
  data.forEach(item => {
    const row = document.createElement('tr');
    Object.values(item).forEach(value => {
      const td = document.createElement('td');
      td.textContent = value;
      row.appendChild(td);
    });
    tbody.appendChild(row);
  });

  table.appendChild(thead);
  table.appendChild(tbody);
  document.getElementById('tableContainer').appendChild(table);
}

数据绑定

准备数据并调用表格生成函数：

const sampleData = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 },
  { id: 3, name: 'Charlie', age: 35 }
];

createTable(sampleData);

动态更新功能

实现添加/删除行功能：

function addRow(tableId, rowData) {
  const table = document.getElementById(tableId);
  const tbody = table.querySelector('tbody') || table;
  const row = document.createElement('tr');

  Object.values(rowData).forEach(value => {
    const td = document.createElement('td');
    td.textContent = value;
    row.appendChild(td);
  });

  tbody.appendChild(row);
}

function deleteRow(tableId, rowIndex) {
  const table = document.getElementById(tableId);
  const rows = table.querySelectorAll('tbody tr');
  if (rows[rowIndex]) rows[rowIndex].remove();
}

高级功能实现

添加排序和过滤功能：

function sortTable(tableId, columnIndex, ascending = true) {
  const table = document.getElementById(tableId);
  const tbody = table.querySelector('tbody');
  const rows = Array.from(tbody.querySelectorAll('tr'));

  rows.sort((a, b) => {
    const aValue = a.cells[columnIndex].textContent;
    const bValue = b.cells[columnIndex].textContent;
    return ascending 
      ? aValue.localeCompare(bValue)
      : bValue.localeCompare(aValue);
  });

  rows.forEach(row => tbody.appendChild(row));
}

function filterTable(tableId, columnIndex, filterValue) {
  const table = document.getElementById(tableId);
  const rows = table.querySelectorAll('tbody tr');

  rows.forEach(row => {
    const cellValue = row.cells[columnIndex].textContent.toLowerCase();
    row.style.display = cellValue.includes(filterValue.toLowerCase()) 
      ? '' 
      : 'none';
  });
}

响应式设计

使表格适应不同屏幕尺寸：

table {
  width: 100%;
  border-collapse: collapse;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

@media screen and (max-width: 600px) {
  table {
    display: block;
    overflow-x: auto;
  }
}

使用现代框架（可选）

使用Vue.js实现更简洁的动态表格：

new Vue({
  el: '#app',
  data: {
    items: [
      { name: 'Item 1', price: 10 },
      { name: 'Item 2', price: 20 }
    ]
  },
  methods: {
    addItem() {
      this.items.push({ name: 'New Item', price: 0 });
    }
  }
});

对应HTML结构：

<div id="app">
  <table>
    <tr v-for="(item, index) in items" :key="index">
      <td>{{ item.name }}</td>
      <td>{{ item.price }}</td>
    </tr>
  </table>
  <button @click="addItem">Add Item</button>
</div>