[英]Retrieving html elements inside a html table cell
我有一个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>
子元素的每个<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);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.