Извлечение элементов html внутри ячейки таблицы html

Question

У меня есть таблица 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); 
     } 

    } 
} 

Вторая попытка становится мне ближе, но оказывается, что вы не можете использовать getElementsByTagName в строка html.

Что мне делать, чтобы исправить эту проблему?

Answer 1

Вам не нужно разобрать 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 при объявлении переменных в циклах, в противном случае вы объявляете их в глобальном масштабе.

Answer 2

Если это только ваша цель перебрать каждый <div>, который является дочерним по <td> с из вашего <table>, рассмотреть возможность использования 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); 
}