table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 3px;
text-align: center;
/* cursor: pointer; */
}
th {
background-color: #f2f2f2;
}
| 野地名将 | 统帅 | 内政 | 勇武 | 智谋 |
|---|---|---|---|---|
| 杨锋 | 68 | 48 | 75 | 63 |
| 阿贵 | 46 | 35 | 91 | 44 |
| 阿哙喃 | 81 | 40 | 91 | 31 |
| 鲍三娘 | 94 | 43 | 102 | 6 |
| 步度根 | 80 | 60 | 90 | 61 |
| 蔡琰 | 22 | 97 | 13 | 92 |
| 彻里吉 | 64 | 57 | 79 | 63 |
| 带来洞主 | 64 | 53 | 65 | 65 |
| 董荼那 | 85 | 44 | 90 | 38 |
| 朵思大王 | 77 | 66 | 72 | 85 |
| 俄何烧戈 | 76 | 14 | 93 | 1 |
| 蛾遮塞 | 46 | 30 | 90 | 41 |
| 费栈 | 53 | 47 | 87 | 54 |
| 骨进 | 62 | 29 | 74 | 28 |
| 呼厨泉 | 86 | 31 | 80 | 19 |
| 花鬘 | 91 | 31 | 100 | 39 |
| 黄乱 | 79 | 30 | 92 | 7 |
| 金环三结 | 80 | 23 | 93 | 23 |
| 柯吾 | 56 | 37 | 74 | 50 |
| 轲比能 | 95 | 72 | 85 | 63 |
| 刘豹 | 77 | 63 | 82 | 59 |
| 楼班 | 81 | 37 | 93 | 48 |
| 芒中 | 59 | 47 | 94 | 68 |
| 孟获 | 94 | 55 | 106 | 51 |
| 孟优 | 63 | 22 | 84 | 26 |
| 迷当大王 | 74 | 38 | 85 | 18 |
| 木鹿大王 | 81 | 7 | 87 | 48 |
| 潘临 | 82 | 23 | 97 | 10 |
| 蹋顿 | 104 | 43 | 100 | 74 |
| 土安 | 69 | 24 | 96 | 26 |
| 王同 | 56 | 30 | 84 | 50 |
| 乌延 | 46 | 29 | 86 | 38 |
| 兀突骨 | 89 | 37 | 98 | 25 |
| 奚泥 | 44 | 30 | 98 | 13 |
| 雅丹 | 55 | 63 | 80 | 69 |
| 阎柔 | 88 | 89 | 69 | 85 |
| 越吉 | 85 | 31 | 98 | 29 |
| 祝融夫人 | 97 | 29 | 104 | 36 |
function sortTable(columnIndex) {
const table = document.getElementById("generalTable");
const rows = Array.from(table.rows).slice(1);
const isAscending = table.rows[0].cells[columnIndex].getAttribute('data-order') === 'asc';
rows.sort((rowA, rowB) => {
const cellA = parseInt(rowA.cells[columnIndex].innerText);
const cellB = parseInt(rowB.cells[columnIndex].innerText);
return isAscending ? cellB - cellA : cellA - cellB;
});
rows.forEach(row => table.tBodies[0].appendChild(row));
table.rows[0].cells[columnIndex].setAttribute('data-order', isAscending ? 'desc' : 'asc');
}
将HTML结构移至JavaScrdt中动态创建简化代码:
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 3px;
text-align: center;
}
th {
background-color: #f2f2f2;
}
const generals = [
["杨锋", 68, 48, 75, 63],
["阿贵", 46, 35, 91, 44],
["阿哙喃", 81, 40, 91, 31],
["鲍三娘", 94, 43, 102, 6],
["步度根", 80, 60, 90, 61],
["蔡琰", 22, 97, 13, 92],
["彻里吉", 64, 57, 79, 63],
["带来洞主", 64, 53, 65, 65],
["董荼那", 85, 44, 90, 38],
["朵思大王", 77, 66, 72, 85],
["俄何烧戈", 76, 14, 93, 1],
["蛾遮塞", 46, 30, 90, 41],
["费栈", 53, 47, 87, 54],
["骨进", 62, 29, 74, 28],
["呼厨泉", 86, 31, 80, 19],
["花鬘", 91, 31, 100, 39],
["黄乱", 79, 30, 92, 7],
["金环三结", 80, 23, 93, 23],
["柯吾", 56, 37, 74, 50],
["轲比能", 95, 72, 85, 63],
["刘豹", 77, 63, 82, 59],
["楼班", 81, 37, 93, 48],
["芒中", 59, 47, 94, 68],
["孟获", 94, 55, 106, 51],
["孟优", 63, 22, 84, 26],
["迷当大王", 74, 38, 85, 18],
["木鹿大王", 81, 7, 87, 48],
["潘临", 82, 23, 97, 10],
["蹋顿", 104, 43, 100, 74],
["土安", 69, 24, 96, 26],
["王同", 56, 30, 84, 50],
["乌延", 46, 29, 86, 38],
["兀突骨", 89, 37, 98, 25],
["奚泥", 44, 30, 98, 13],
["雅丹", 55, 63, 80, 69],
["阎柔", 88, 89, 69, 85],
["越吉", 85, 31, 98, 29],
["祝融夫人", 97, 29, 104, 36]
];
const headers = ["野地名将", "统帅", "内政", "勇武", "智谋"];
const tableContainer = document.getElementById("tableContainer");
const table = document.createElement("table");
table.id = "generalTable";
tableContainer.appendChild(table);
const thead = document.createElement("thead");
table.appendChild(thead);
const headerRow = document.createElement("tr");
thead.appendChild(headerRow);
headers.forEach((header, index) => {
const th = document.createElement("th");
th.innerText = header;
if (index > 0) {
th.onclick = () => sortTable(index);
th.style.cursor = "pointer";
}
headerRow.appendChild(th);
});
const tbody = document.createElement("tbody");
table.appendChild(tbody);
generals.forEach(general => {
const row = document.createElement("tr");
general.forEach(cellText => {
const cell = document.createElement("td");
cell.innerText = cellText;
row.appendChild(cell);
});
tbody.appendChild(row);
});
function sortTable(columnIndex) {
const table = document.getElementById("generalTable");
const rows = Array.from(table.tBodies[0].rows);
const isAscending = table.rows[0].cells[columnIndex].getAttribute('data-order') === 'asc';
rows.sort((rowA, rowB) => {
const cellA = parseInt(rowA.cells[columnIndex].innerText);
const cellB = parseInt(rowB.cells[columnIndex].innerText);
return isAscending ? cellB - cellA : cellA - cellB;
});
rows.forEach(row => table.tBodies[0].appendChild(row));
table.rows[0].cells[columnIndex].setAttribute('data-order', isAscending ? 'desc' : 'asc');
}
再优化一下来减少代码量,保持其功能不变:
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}
th, td {
border: 1px solid #ddd;
padding: 3px;
text-align: center;
}
th {
background-color: #f2f2f2;
cursor: pointer;
}
th:nth-child(1) {
cursor: default;
}
const generals = [
["杨锋", 68, 48, 75, 63],
["阿贵", 46, 35, 91, 44],
["阿哙喃", 81, 40, 91, 31],
["鲍三娘", 94, 43, 102, 6],
["步度根", 80, 60, 90, 61],
["蔡琰", 22, 97, 13, 92],
["彻里吉", 64, 57, 79, 63],
["带来洞主", 64, 53, 65, 65],
["董荼那", 85, 44, 90, 38],
["朵思大王", 77, 66, 72, 85],
["俄何烧戈", 76, 14, 93, 1],
["蛾遮塞", 46, 30, 90, 41],
["费栈", 53, 47, 87, 54],
["骨进", 62, 29, 74, 28],
["呼厨泉", 86, 31, 80, 19],
["花鬘", 91, 31, 100, 39],
["黄乱", 79, 30, 92, 7],
["金环三结", 80, 23, 93, 23],
["柯吾", 56, 37, 74, 50],
["轲比能", 95, 72, 85, 63],
["刘豹", 77, 63, 82, 59],
["楼班", 81, 37, 93, 48],
["芒中", 59, 47, 94, 68],
["孟获", 94, 55, 106, 51],
["孟优", 63, 22, 84, 26],
["迷当大王", 74, 38, 85, 18],
["木鹿大王", 81, 7, 87, 48],
["潘临", 82, 23, 97, 10],
["蹋顿", 104, 43, 100, 74],
["土安", 69, 24, 96, 26],
["王同", 56, 30, 84, 50],
["乌延", 46, 29, 86, 38],
["兀突骨", 89, 37, 98, 25],
["奚泥", 44, 30, 98, 13],
["雅丹", 55, 63, 80, 69],
["阎柔", 88, 89, 69, 85],
["越吉", 85, 31, 98, 29],
["祝融夫人", 97, 29, 104, 36]
];
const headers = ["野地名将", "统帅", "内政", "勇武", "智谋"];
document.body.innerHTML += `
| ${header} | `).join('')}
|---|
| ${cellText} | `).join('')}
`;
function sortTable(columnIndex) {
const table = document.getElementById("generalTable");
const rows = Array.from(table.tBodies[0].rows);
const isAscending = table.rows[0].cells[columnIndex].getAttribute('data-order') === 'asc';
rows.sort((rowA, rowB) => {
const cellA = parseInt(rowA.cells[columnIndex].innerText);
const cellB = parseInt(rowB.cells[columnIndex].innerText);
return isAscending ? cellB - cellA : cellA - cellB;
});
rows.forEach(row => table.tBodies[0].appendChild(row));
table.rows[0].cells[columnIndex].setAttribute('data-order', isAscending ? 'desc' : 'asc');
}
友情链接:
Copyright © 2022 战国无双-策略国战活动站 All Rights Reserved.