jquery动态生成表格

使用 jQuery 动态生成表格

动态生成表格可以通过 jQuery 的 DOM 操作和动态元素创建功能实现。以下是几种常见的方法：

方法一：通过字符串拼接生成表格

// 定义表格数据
var tableData = [
  { name: "张三", age: 25, city: "北京" },
  { name: "李四", age: 30, city: "上海" },
  { name: "王五", age: 28, city: "广州" }
];

// 生成表格 HTML
var tableHtml = '<table border="1"><thead><tr><th>姓名</th><th>年龄</th><th>城市</th></tr></thead><tbody>';

// 添加行数据
$.each(tableData, function(index, item) {
  tableHtml += '<tr><td>' + item.name + '</td><td>' + item.age + '</td><td>' + item.city + '</td></tr>';
});

tableHtml += '</tbody></table>';

// 将表格添加到页面
$('#tableContainer').html(tableHtml);

方法二：使用 jQuery DOM 方法创建表格

// 创建表格元素
var table = $('<table>').attr('border', '1');
var thead = $('<thead>').appendTo(table);
var tbody = $('<tbody>').appendTo(table);

// 添加表头
$('<tr>').appendTo(thead)
  .append($('<th>').text('姓名'))
  .append($('<th>').text('年龄'))
  .append($('<th>').text('城市'));

// 添加数据行
$.each(tableData, function(index, item) {
  $('<tr>').appendTo(tbody)
    .append($('<td>').text(item.name))
    .append($('<td>').text(item.age))
    .append($('<td>').text(item.city));
});

// 将表格添加到页面
$('#tableContainer').append(table);

方法三：使用模板字符串（ES6）

// 使用模板字符串生成表格
var tableHtml = `
  <table border="1">
    <thead>
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>城市</th>
      </tr>
    </thead>
    <tbody>
      ${tableData.map(item => `
        <tr>
          <td>${item.name}</td>
          <td>${item.age}</td>
          <td>${item.city}</td>
        </tr>
      `).join('')}
    </tbody>
  </table>
`;

$('#tableContainer').html(tableHtml);

方法四：动态添加行

如果需要动态添加行到现有表格：

// 获取表格的 tbody
var tbody = $('#myTable tbody');

// 添加新行
function addRow(data) {
  var row = $('<tr>');
  row.append($('<td>').text(data.name));
  row.append($('<td>').text(data.age));
  row.append($('<td>').text(data.city));
  tbody.append(row);
}

// 调用添加行函数
addRow({name: "赵六", age: 35, city: "深圳"});

注意事项

1. 性能考虑：对于大量数据，字符串拼接方法可能比 DOM 操作方法更快
2. 安全性：如果数据来自用户输入，需要进行适当的转义以防止 XSS 攻击
3. 样式控制：可以通过 CSS 为动态生成的表格添加样式
4. 事件绑定：动态生成的元素需要使用事件委托来绑定事件

// 为动态生成的表格行绑定点击事件
$('#tableContainer').on('click', 'tr', function() {
  console.log('行被点击');
});

以上方法可以根据具体需求选择使用，字符串拼接适合简单场景，DOM 操作方法更灵活，模板字符串则提供了更好的可读性。