DOM遍历table

最新推荐文章于 2022-08-21 21:11:20 发布

只会复制粘贴

最新推荐文章于 2022-08-21 21:11:20 发布

阅读量981

点赞数

本文链接：https://blog.csdn.net/hzwangzi123456/article/details/70157145

版权

<!DOCTYPE html>
<html>
<head>
    <title>123</title>
</head>
<body>

<table id="table01">
    <tbody>
    <tr>
        <td>John</td>
        <td>Doe</td>
        <td>Alaska</td>
    </tr>
    <tr>
        <td>AAA</td>
        <td>BBB</td>
        <td>CCC</td>
    </tr>
    </tbody>
</table>
<button οnclick="fun01()">成功的查询</button>
<button οnclick="fun02()">失败的查询</button>
<script>
    function fun01() { //成功的
        var table = document.getElementById("table01");
        var tbody = table.getElementsByTagName('tbody')[0];
        var trs = tbody.getElementsByTagName("tr");
        for ( var i = 0; i < trs.length; i++) {
            var tr = trs[i];
            var tds = tr.getElementsByTagName("td");
            for ( var j = 0; j < tds.length; j++) {
                var td = tds[j];
                console.log("i:" + i + " j: " + j + " " + td.innerHTML);
            }
        }
    }
    function fun02() { //失败的
        var table = document.getElementById("table01");
        var tbodys = table.childNodes;
        console.log(tbodys);
        var tbody = tbodys[1];
        var trs = tbody.childNodes;
        console.log(trs);
        var tds = trs[1].childNodes;
        console.log(tds);
    }
</script>
</body>
</html>