JavaScript是一種廣泛應(yīng)用于網(wǎng)絡(luò)的腳本語言，它能夠為網(wǎng)站創(chuàng)建動態(tài)特效和更好的用戶體驗。其中，制作表格是JavaScript最常用的應(yīng)用之一。JavaScript提供了多種方法來實現(xiàn)表格的制作，可以簡單粗暴，也可以高端華麗。本文將向大家介紹幾種在JavaScript中制作表格的函數(shù)。
第一種函數(shù)是最基礎(chǔ)的表格制作函數(shù)。該函數(shù)需要接收數(shù)據(jù)和表格各項參數(shù)，并通過操作DOM元素來創(chuàng)建表格。例如：

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的函數(shù)，該函數(shù)接受三個參數(shù)：數(shù)據(jù)、表頭和表格樣式名。通過循環(huán)遍歷數(shù)據(jù)和表頭，我們創(chuàng)建了一個包含數(shù)據(jù)的表格。最后，將該表格附加到文檔的主體上。
第二種函數(shù)是更進(jìn)階的表格制作函數(shù)。與第一種函數(shù)不同的是，該函數(shù)可以將表格的內(nèi)容排序。例如：

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的函數(shù)，它基于createTable函數(shù)并添加了排序的功能。我們定義一個compareRows函數(shù)，該函數(shù)接受兩個參數(shù)：排序列和排序順序。它返回一個函數(shù)，該函數(shù)接受兩行數(shù)據(jù)，比較它們的排序值，并返回結(jié)果。添加事件監(jiān)聽器以便當(dāng)表頭元素被點擊時觸發(fā)該函數(shù)。當(dāng)order屬性設(shè)置為desc時，我們需要切換排序的順序。
綜上，以上兩種函數(shù)是創(chuàng)建表格的兩個基本方法。createTable函數(shù)是一個體面而簡潔的方法來制作表格，而createSortableTable函數(shù)則為表格添加了排序功能。Web開發(fā)者可以使用這些函數(shù)來改善他們的網(wǎng)站的用戶體驗。