Нужно найти количество дочерних элементов в DOM таблицы..

Question

Нужно найти количество дочерних элементов в DOM таблицы..

Celtic Hammer Мудрец (17457), открыт 4 дня назад

Дочерний элемент для таблицы это надо полагать строка. Строки добавляются динамически. Добавили три строки. Но он пишет 5. Пять чего? Как найти количество добавленных строк?

 <p class="st">Симулятор кассового аппарата</p> 
    <button id="but1" class="btn1">Добавить поле</button> 
 <div class="table_component" role="region" tabindex="0"> 
<table id="tb"> 
     
    <thead> 
        <tr> 
            <th>Название товара</th> 
            <th>Количество</th> 
            <th>Цена</th> 
        </tr> 
    </thead> 
    <tbody></tbody> 
</table> 
<p id="p"></p> 
 
</div> 
<script> 
const addField = () => { 
    let nr = document.createElement('tr');    
    tb.appendChild(nr); 
    let ntd = document.createElement('td'); 
    nr.appendChild(ntd);     
    let ntd2 = document.createElement('td'); 
    nr.appendChild(ntd2); 
    let ntd3 = document.createElement('td'); 
    nr.appendChild(ntd3); 
    ntd.setAttribute('contenteditable','true'); 
    ntd2.setAttribute('contenteditable','true'); 
    ntd3.setAttribute('contenteditable','true'); 
    p.innerHTML = tb.childElementCount;     
} 
 
but1.addEventListener('click', addField) 
</script>

Дополнен 4 дня назад

А, да, там thead и tbody

Answer 1

V̲i̲s̲t̲a̲s̲t̲e̲r̲ Искусственный Интеллект (272461) 4 дня назад

Через rows.length, там: https://codepen.io/VISTASTER/pen/gbOzqNR

Answer 2

kaiu Высший разум (120142) 4 дня назад

Ну детей у него 3, все верно тебе дает...хочешь -2 пиши и будет, что надо

Celtic HammerМудрец (17457) 4 дня назад

Да, id нужно было добавлять в tbody id="tb". Сразу стало как надо, 1,2,3,4,5,6...

Павел Просветленный (25930) Celtic Hammer, не обязательно. У таблицы есть свойство rows и метод insertRow(), который как решит проблему, так и сократит код.

Answer 3

Такие вещи можно проверить самому, не тратя время на вопросы. Привыкай хотя бы использовать собственный код для отладки.

 for(child of tb.children){
  console.log(child);
  console.log(child.tagName);
}