用JS如何获得table中checkbox所在的行列值？弄了一个上午了好捉急！

Posted 2023-03-27

像图中这样，点击某一个checkbox，用js获取这个checkbox所在的行数是多少？列数是多少，用js如何实现？先谢谢了！

你可以使用 javascript 中自带的 rowIndex 和 cellIndex 来获取行和列的键值 (从0开始)

点击 checkbox，获取 parentNode (也就是 td)，td.cellIndex 就是所在列的键值

点击 checkbox，获取 parentNode.parentNode (也就是 tr)，tr.rowIndex 就是所在行的键值

<script type="text/javascript">
// 点击
document.onclick = function(e)
    // 兼容 event 和 target
    e = e || window.event;
    var target = e.target || e.srcElement;
    // 确认是 checkbox
    if(target.tagName.toLowerCase() === "input"
        && target.type === "checkbox")
        // 获取行列键值
        var row_num = target.parentNode.parentNode.rowIndex;
        var col_num = target.parentNode.cellIndex;
        // 输出
        alert(row_num + " " + col_num);
    
;
</script>

因为键值是从 0 开始，一般需要 +1 才是行列数，但因为你表单中第一行个第一列都是文字，所以不需要 +1 正好输出需要的数字，例如点击周四 + 6，会输出 4 6

参考技术A tableNode.rows();这个是获取所有的行，即tr数组。tr.ceils();这个是获取tr里面所有的td;
两层循环：
var trs=tableNode.rows();

for(var i=0;i<trs.length;i++)
var tds=trs[i].ceil();
for(var j=0;j<tds.length;j++)
if(tds[i].firstChild.checked==true)//假设td中只有一个子节点
return i+','+j;