<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>野地名将信息表</title><style>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;}</style>
</head>
<body><table id="generalTable"><thead><tr><th>野地名将</th><th onclick="sortTable(1)" style="cursor: pointer;">统帅</th><th onclick="sortTable(2)" style="cursor: pointer;">内政</th><th onclick="sortTable(3)" style="cursor: pointer;">勇武</th><th onclick="sortTable(4)" style="cursor: pointer;">智谋</th></tr></thead><tbody><tr><td>杨锋</td><td>68</td><td>48</td><td>75</td><td>63</td></tr><tr><td>阿贵</td><td>46</td><td>35</td><td>91</td><td>44</td></tr><tr><td>阿哙喃</td><td>81</td><td>40</td><td>91</td><td>31</td></tr><tr><td>鲍三娘</td><td>94</td><td>43</td><td>102</td><td>6</td></tr><tr><td>步度根</td><td>80</td><td>60</td><td>90</td><td>61</td></tr><tr><td>蔡琰</td><td>22</td><td>97</td><td>13</td><td>92</td></tr><tr><td>彻里吉</td><td>64</td><td>57</td><td>79</td><td>63</td></tr><tr><td>带来洞主</td><td>64</td><td>53</td><td>65</td><td>65</td></tr><tr><td>董荼那</td><td>85</td><td>44</td><td>90</td><td>38</td></tr><tr><td>朵思大王</td><td>77</td><td>66</td><td>72</td><td>85</td></tr><tr><td>俄何烧戈</td><td>76</td><td>14</td><td>93</td><td>1</td></tr><tr><td>蛾遮塞</td><td>46</td><td>30</td><td>90</td><td>41</td></tr><tr><td>费栈</td><td>53</td><td>47</td><td>87</td><td>54</td></tr><tr><td>骨进</td><td>62</td><td>29</td><td>74</td><td>28</td></tr><tr><td>呼厨泉</td><td>86</td><td>31</td><td>80</td><td>19</td></tr><tr><td>花鬘</td><td>91</td><td>31</td><td>100</td><td>39</td></tr><tr><td>黄乱</td><td>79</td><td>30</td><td>92</td><td>7</td></tr><tr><td>金环三结</td><td>80</td><td>23</td><td>93</td><td>23</td></tr><tr><td>柯吾</td><td>56</td><td>37</td><td>74</td><td>50</td></tr><tr><td>轲比能</td><td>95</td><td>72</td><td>85</td><td>63</td></tr><tr><td>刘豹</td><td>77</td><td>63</td><td>82</td><td>59</td></tr><tr><td>楼班</td><td>81</td><td>37</td><td>93</td><td>48</td></tr><tr><td>芒中</td><td>59</td><td>47</td><td>94</td><td>68</td></tr><tr><td>孟获</td><td>94</td><td>55</td><td>106</td><td>51</td></tr><tr><td>孟优</td><td>63</td><td>22</td><td>84</td><td>26</td></tr><tr><td>迷当大王</td><td>74</td><td>38</td><td>85</td><td>18</td></tr><tr><td>木鹿大王</td><td>81</td><td>7</td><td>87</td><td>48</td></tr><tr><td>潘临</td><td>82</td><td>23</td><td>97</td><td>10</td></tr><tr><td>蹋顿</td><td>104</td><td>43</td><td>100</td><td>74</td></tr><tr><td>土安</td><td>69</td><td>24</td><td>96</td><td>26</td></tr><tr><td>王同</td><td>56</td><td>30</td><td>84</td><td>50</td></tr><tr><td>乌延</td><td>46</td><td>29</td><td>86</td><td>38</td></tr><tr><td>兀突骨</td><td>89</td><td>37</td><td>98</td><td>25</td></tr><tr><td>奚泥</td><td>44</td><td>30</td><td>98</td><td>13</td></tr><tr><td>雅丹</td><td>55</td><td>63</td><td>80</td><td>69</td></tr><tr><td>阎柔</td><td>88</td><td>89</td><td>69</td><td>85</td></tr><tr><td>越吉</td><td>85</td><td>31</td><td>98</td><td>29</td></tr><tr><td>祝融夫人</td><td>97</td><td>29</td><td>104</td><td>36</td></tr></tbody></table><script>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');}</script></body>
</html>将HTML结构移至JavaScrdt中动态创建简化代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>野地名将信息表</title><style>table {width: 50%;border-collapse: collapse;margin: 20px auto;}th, td {border: 1px solid #ddd;padding: 3px;text-align: center;}th {background-color: #f2f2f2;}</style>
</head>
<body><div id="tableContainer"></div><script>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');}</script></body>
</html>再优化一下来减少代码量，保持其功能不变：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>野地名将信息表</title><style>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;}</style>
</head>
<body><div id="tableContainer"></div><script>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 += `<table id="generalTable"><thead><tr>${headers.map((header, index) => `<th onclick="${index > 0 ? 'sortTable(' + index + ')' : ''}">${header}</th>`).join('')}</tr></thead><tbody>${generals.map(general => `<tr>${general.map(cellText => `<td>${cellText}</td>`).join('')}</tr>`).join('')}</tbody></table>`;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');}</script></body>
</html>
)
