第一种函数是最基础的表格制作函数。该函数需要接收数据和表格各项参数，并通过操作DOM元素来创建表格。例如：
function createTable(data, header, tableClass) {var table = document.createElement('table');if (tableClass) {table.className = tableClass;}var thead = document.createElement('thead');var tbody = document.createElement('tbody');for (var i = 0; i < header.length; i++) {var th = document.createElement('th');th.appendChild(document.createTextNode(header[i]));thead.appendChild(th);}for (var i = 0; i < data.length; i++) {var tr = document.createElement('tr');for (var j = 0; j < header.length; j++) {var td = document.createElement('td');td.appendChild(document.createTextNode(data[i][header[j]]));tr.appendChild(td);}tbody.appendChild(tr);}table.appendChild(thead);table.appendChild(tbody);return table;}// 用法var data = [{name: 'Alice', age: 20},{name: 'Bob', age: 25},{name: 'Charlie', age: 30},];var header = ['name', 'age'];var table = createTable(data, header, 'table-responsive');document.body.appendChild(table);在上面的代码中，我们定义了一个名为createTable的函数，该函数接受三个参数：数据、表头和表格样式名。通过循环遍历数据和表头，我们创建了一个包含数据的表格。最后，将该表格附加到文档的主体上。
第二种函数是更进阶的表格制作函数。与第一种函数不同的是，该函数可以将表格的内容排序。例如：
function createSortableTable(data, header, tableClass) {var table = createTable(data, header, tableClass);var ths = table.querySelectorAll('th');for (var i = 0; i < ths.length; i++) {ths[i].addEventListener('click', function(event) {var column = event.target.cellIndex;var tbody = table.querySelector('tbody');var rows = Array.prototype.slice.call(tbody.rows, 0);var order = this.getAttribute('data-order');if (order === 'desc') {this.setAttribute('data-order', 'asc');rows = rows.sort(compareRows(column, 'asc'));} else {this.setAttribute('data-order', 'desc');rows = rows.sort(compareRows(column, 'desc'));}for (var j = 0; j < rows.length; j++) {tbody.appendChild(rows[j]);}});}return table;}function compareRows(column, order) {return function(rowA, rowB) {var rowDataA = rowA.cells[column].textContent;var rowDataB = rowB.cells[column].textContent;var result = 0;if (rowDataA < rowDataB) {result = -1;} else if (rowDataA > rowDataB) {result = 1;}return order === 'desc' ? -result : result;};}// 用法var data = [{name: 'Alice', age: 20},{name: 'Bob', age: 25},{name: 'Charlie', age: 30},];var header = ['name', 'age'];var table = createSortableTable(data, header, 'table-responsive');document.body.appendChild(table);在上面的代码中，我们新增了一个名为createSortableTable的函数，它基于createTable函数并添加了排序的功能。我们定义一个compareRows函数，该函数接受两个参数：排序列和排序顺序。它返回一个函数，该函数接受两行数据，比较它们的排序值，并返回结果。添加事件监听器以便当表头元素被点击时触发该函数。当order属性设置为desc时，我们需要切换排序的顺序。
综上，以上两种函数是创建表格的两个基本方法。createTable函数是一个体面而简洁的方法来制作表格，而createSortableTable函数则为表格添加了排序功能。Web开发者可以使用这些函数来改善他们的网站的用户体验。
上一篇：css按顺序点击按钮
下一篇：JavaScript中字段是什么意思
