DOM遍历table

<!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>

在JavaScript中,要获取HTML表格(table)中的所有数据,通常会涉及遍历每一行(tr)并提取其中的数据。如果你想要获取表头(th)和单元格(td),可以按照以下步骤操作: 1. 首先,通过DOM选择器选中整个表格元素,例如: ```javascript var table = document.getElementById('yourTableId'); ``` 替换`yourTableId`为你实际的表格ID。 2. 然后,获取表头(如果有): ```javascript var thead = table.getElementsByTagName('thead')[0]; var headerRows = thead.getElementsByTagName('tr'); ``` 3. 接着,获取数据行(tbody或tfoot内的tr元素): ```javascript var tbody = table.getElementsByTagName('tbody')[0] || table.getElementsByTagName('tfoot')[0]; // 选取tbody或tfoot var dataRows = tbody.getElementsByTagName('tr'); ``` 4. 对于每行数据,遍历其单元格: ```javascript for (var i = 0; i < dataRows.length; i++) { var row = dataRows[i]; // 如果是表头,可能不需要<td> if (row.tagName === 'TH') { var cells = row.getElementsByTagName('th'); // 表头处理 } else { var cells = row.getElementsByTagName('td'); // 数据行处理 } for (var j = 0; j < cells.length; j++) { var cellData = cells[j].innerText || cells[j].textContent; // 这里cellData就是每个单元格的内容 console.log('Cell ' + (j+1) + ':', cellData); } } ``` 这将打印出表格中所有单元格的内容。如果你需要组织成更复杂的结构,比如对象数组,你可以创建一个函数去处理这些数据。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值