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 = 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”的更改按预期进行了。

使用Java脚本按列标题上的适当列对HTML表进行排序，请单击

1 个答案: