HTML5表格是一種強大的網頁元素,通過它可以將數據整理成易于瀏覽和讀取的形式。但是,使用JavaScript代碼可以為表格添加更多的功能和交互性。下面是一個示例代碼,它可以為表格添加排序功能。
// 獲取表格元素 var table = document.getElementById('myTable'); var headers = table.getElementsByTagName('th'); for (var i = 0; i< headers.length; i++) { headers[i].addEventListener('click', sortTable.bind(null, i)); } function sortTable(colIndex) { var table = document.getElementById('myTable'); var rows = table.rows; var sortedRows = Array.from(rows).slice(1); var sortFn; // 確定排序函數 switch (headers[colIndex].getAttribute('data-type')) { case 'number': sortFn = function(a, b) { return Number(a.cells[colIndex].textContent) - Number(b.cells[colIndex].textContent); }; break; case 'text': default: sortFn = function(a, b) { return a.cells[colIndex].textContent.localeCompare(b.cells[colIndex].textContent); }; } // 排序 sortedRows.sort(sortFn); // 更新表格 for (var i = 0; i< sortedRows.length; i++) { table.appendChild(sortedRows[i]); } }
上述代碼中,我們首先獲取了表格元素以及表頭元素,然后為表頭元素添加了排序功能的事件監聽器。當表頭被點擊時,對對應的列進行排序。我們通過判斷每列是數字還是文本來確定排序函數。最后,我們將排好序的行添加回表格中,從而實現了排序功能。
下一篇js提取css顏色