我是javascript的新手,我遇到了一段时间无法解决的问题...... 我需要动态排序表。 (借用)代码是:
function sortTable(n) {
var table, rows, switching, i, x, y, shouldSwitch, dir, switchcount = 0;
table = document.getElementById("myTable2");
switching = true;
dir = "asc";
while (switching) {
switching = false;
rows = table.getElementsByTagName("TR");
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.toLowerCase() > y.innerHTML.toLowerCase()) {
shouldSwitch= true;
break;
}
} else if (dir == "desc") {
if (x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase()) {
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;
}
}
}
}
它可以正常处理文本/数字值,但问题是表中的一列包含复选框。并且想法是对表格进行排序,其中带有选中复选框的行位于顶部(/底部,取决于上升/下降方向)。
我尝试检查x.innerHTML.checked==true
,但x.innerHTML.checked
返回“未定义”,因此没有用处。
请问任何建议?
答案 0 :(得分:2)
使用纯本机javascript,你的for循环应该是这样的:
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.querySelector("input[type=checkbox]") !== null) { // checkbox case
shouldSwitch = (x.querySelector("input[type=checkbox]").checked > y.querySelector("input[type=checkbox]").checked);
} else {
shouldSwitch= x.innerHTML.toLowerCase() > y.innerHTML.toLowerCase();
}
} else if (dir == "desc") {
if(x.querySelector("input[type=checkbox]") !== null) {
shouldSwitch = (x.querySelector("input[type=checkbox]").checked < y.querySelector("input[type=checkbox]").checked);
} else {
shouldSwitch= x.innerHTML.toLowerCase() < y.innerHTML.toLowerCase();
}
}
if (shouldSwitch) {
break;
}
}
使用x.querySelector(&#34;输入[type =复选框]&#34;),您正在寻找之前已选择的TD元素中的复选框,并且您已将其放入变量x。
x是一个节点对象,是网页DOM的一个元素。
querySelector返回一个节点对象而不是返回简单文本的innerHTML。在简单的文字中,您无法轻松验证是否已选中复选框。
答案 1 :(得分:1)
如果x是复选框类型DOM元素,那么只需执行x.checked
以访问复选框的布尔值。
例如:
document.getElementById('mycheckbox').checked;
// will return true or false
<input id="mycheckbox" type="checkbox">