检索html表格单元格中的html元素

Retrieving html elements inside a html table cell

本文关键字：html 元素 单元格 表格 检索      更新时间：2023-09-26

我有一个html表。在我的应用程序中，我在应用程序中动态添加div。它为用户提供了应用程序的光学视图。

我正在尝试解析html表数据，我有一个问题。

这是我的第一次尝试:

var tblworkout = document.getElementById("tblWorkout");
for (i = 1; i < tblworkout.rows.length; i++) {
    console.log("table row count:" + i)
    for (j = 1; j < tblworkout.rows[i].cells.length; j++) {
        console.log("td count for row " + i + ": " + j);
        for (k = 0; tblworkout.rows[i].cells[j].getElementsByTagName("div").length; k++) {
            console.log("div count for td " + j + ": " + k);
        }
    }
}

这是第二次尝试:

var tblworkout = document.getElementById("tblWorkout");
for (i = 1; i < tblworkout.rows.length; i++) {
    console.log("table row count:" + i)
    for (j = 1; j < tblworkout.rows[i].cells.length; j++) {
        console.log("td count for row " + i + ": " + j);
        var tdhtml = tblworkout.rows[i].cells[j].innerHTML;
        console.log(tdhtml);
        for (k = 0; k < tdhtml.getElementsByTagName("div").length; k++) {
            console.log(k);
        }
    }
}

第二次尝试让我更接近，但事实证明你不能在html字符串中使用getElementsByTagName。

我该怎么做来解决这个问题?

您不需要解析innerHTML，只需查询每个td中的元素:

var tblworkout = document.getElementById("tblWorkout");
for (var i = 1; i < tblworkout.rows.length; i++) {
    console.log("table row count:" + i)
    for (j = 1; j < tblworkout.rows[i].cells.length; j++) {
        console.log("td count for row " + i + ": " + j);
        var td = tblworkout.rows[i].cells[j];
        var divs = td.getElementsByTagName("div"); // <-- select divs collection in td
        console.log(divs);
        for (var k = 0; k < divs.length; k++) {
            console.log(divs[k]);
        }
    }
}

当你在循环中声明变量时，不要忘记加上var，否则你将在全局作用域中声明它们

如果您的目标只是迭代<table>的<td> s的子<div>，请考虑使用document.querySelectorAll 

var div = document.querySelectorAll(
    '#tblWorkout > tr > td > div, ' +
    '#tblWorkout > tbody > tr > td > div' // tables are supposed to have <tbody>s ;)
);
console.log('Found ' + div.length + ' <div>s');
var i;
for (i = 0; i < div.length; ++i) {
    console.log(div);
}
相关文章：