使用Java腳本按列標題上的適當列對HTML表進行排序，請單擊

Question

我試圖建立一個HTML表，當您單擊列標題時，它將按該列對表進行排序。 我當前的解決方案非常適合第一欄，這是我在W3schools上發現的。

編輯：（問題是比較每個TD中包含的所有HTML的腳本，而不僅僅是顯示的文本）

但是，當我嘗試使用“ n”將其通用化，而不是在Java腳本中將要排序的列中保留數字時，我似乎無法使它取n的正確值。

我的計划是使用W3schools（在下面）中的代碼對第一列進行排序，但是插入變量n以允許同一段代碼對多列進行排序。 我正在嘗試讓Java腳本從HTML部分本身讀取n，但是我不確定為什么它不起作用。

這是我嘗試使用n的W3schools代碼的版本，無論我單擊哪個列標題，當前都對第一列進行排序。

 function sortTable(n) { var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0; table = document.getElementById("mytable"); switching = true; dir = "asc"; while (switching) { switching = false; rows = table.rows; for (i = 1; i < (rows.length - 1); i++) { shouldSwitch = false; x = rows[i].getElementsByTagName("TD")[n]; y = rows[i + 1].getElementsByTagName("TD")[n]; if (dir == "asc") { if (x.innerHTML.toUpperCase() > y.innerHTML.toUpperCase()) { shouldSwitch = true; break; } } else if (dir == "desc") { if (x.innerHTML.toUpperCase() < y.innerHTML.toUpperCase()) { shouldSwitch = true; break; } } } if (shouldSwitch) { rows[i].parentNode.insertBefore(rows[i + 1], rows[i]); switching = true; switchcount ++; } else { if (switchcount == 0 && dir == "asc") { dir = "desc"; switching = true; } } } } 

 <table id="mytable"> <tr> <th> <div onclick="sortTable(0)">a</div> </th> <th> <div onclick="sortTable(1)">b</div> </th> <th> <div onclick="sortTable(2)">c</div> </th> </tr> <tr> <td>04718J00065</td> <td>2100305513</td> <td>10</td> </tr> <tr> <td>29417J01131</td> <td>2100305513</td> <td>30</td> </tr> <tr> <td>07416J01979</td> <td>2100029648</td> <td>0</td> </tr> </table> 

我認為問題是Java腳本沒有獲得n的值，並且默認為0，這就是為什么無論單擊哪個標頭都對第一列進行排序的原因。 如何從onclick="sortTable(0)"讀取n = 0，從onclick="sortTable(1)"等讀取n = onclick="sortTable(1)"呢？

Answer 1

我發現了導致問題的原因。

使用

(x.innerHTML.toUpperCase() > y.innerHTML.toUpperCase())

和

x = rows[i].getElementsByTagName("TD")[n];
y = rows[i + 1].getElementsByTagName("TD")[n];

比較該TD內的所有內容，而不僅僅是顯示的文本。 在發布此問題的代碼時，我試圖從每個TD中刪除一個<a></a>部分，以免過分詳細地發布代碼，並且鏈接指向與第一個字符串共享名稱的文件。柱。

<table id="mytable">
            <tr>
                <th>
                    <div onclick="sortTable(0)">a</div>
                </th>
                <th>
                    <div onclick="sortTable(1)">b</div>
                </th>
                <th>
                    <div onclick="sortTable(2)">c</div>
                </th>
            </tr>
            <tr>
                <td><a href="04718J00065.html">04718J00065</a></td>
                <td><a href="04718J00065.html">2100305513</a></td>
                <td><a href="04718J00065.html">10</a></td>
            </tr>
            <tr>
                <td><a href="29417J01131.html">29417J01131</a></td>
                <td><a href="29417J01131.html">2100305513</a></td>
                <td><a href="29417J01131.html">30</a></td>
            </tr>
            <tr>
                <td><a href="07416J01979.html">07416J01979</a></td>
                <td><a href="07416J01979.html">2100029648</a></td>
                <td><a href="07416J01979.html">0</a></td>
            </tr>
</table>

<script>
function sortTable(n) {
    var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
    table = document.getElementById("mytable");
    switching = true;
    dir = "asc";
    while (switching) {
        switching = false;
        rows = table.rows;
        for (i = 1; i < (rows.length - 1); i++) {
            shouldSwitch = false;
            x = rows[i].getElementsByTagName("A")[n];
            y = rows[i + 1].getElementsByTagName("A")[n];
            if (dir == "asc") {
                if (x.innerHTML.toUpperCase() > y.innerHTML.toUpperCase()) {
                    shouldSwitch = true;
                    break;
                }
            } else if (dir == "desc") {
                if (x.innerHTML.toUpperCase() < y.innerHTML.toUpperCase()) {
                    shouldSwitch = true;
                    break;
                }
            }
        }
        if (shouldSwitch) {
            rows[i].parentNode.insertBefore(rows[i + 1], rows[i]);
            switching = true;
            switchcount ++; 
        } else {
            if (switchcount == 0 && dir == "asc") {
                dir = "desc";
                switching = true;
            }
        }
    }
}
</script>

我對此的解決方案是將腳本中的“ TD”交換為“ A”，這樣它將在標記內部進行比較，而不是鏈接位置本身。 我對包含“ n”的更改已按預期進行。