Как использовать javascript для подсчета количества строк в «плоской» таблице

Question

Скажем, у меня есть следующая таблица. Как бы я показал количество строк в таблице, используя простой javascript в абзаце <p id="rowscount"></p>.

Я новичок в javascript, поэтому было бы полезно, если бы вы могли включить любые комментарии относительно вызова функции, например.

<p id="rowscount"></p> 
 

 

 
<table> 
 

 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    </tr> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    </tr> 
 

 
</table>

Answer 1

Предположим, у вас есть таблица следующим образом:

<div id="rowsNumber"></div> 
<table id="myTable"> 

    <tr> 
    <td>One</td> 
    <td>Two</td> 
    </tr> 
    <tr> 
    <td>One</td> 
    <td>Two</td> 
    </tr> 

</table> 

В некоторых браузере строка данных таблиц идет завернута внутри TBODY тега следующим образом:

<div id="rowsNumber"></div> 
<table id="myTable"> 
    <tbody> 
     <tr> 
     <td>One</td> 
     <td>Two</td> 
     </tr> 
     <tr> 
     <td>One</td> 
     <td>Two</td> 
     </tr> 
    <tbody> 
    </table> 

так определить функцию так:

var getTableRowCount = function(tableNode){ 
    var tbody = tableNode.getElementsByTagName('tbody')[0]; 
    if(tbody){ 
    return tbody.getElementsByTagName('tr').length; 
    }else{ 
    return tableNode.getElementsByTagName('tr').length; 
    } 

} 

И вызовите функцию прохождения узла таблицы в качестве параметра например:

var count = getTableRowCount(document.getElementById('myTable')); 
document.getElementById('rowsNumber').innerHTML = 'Total rows = ' + count; 

Теперь, если вы хотите наблюдать слушатель так, что всякий раз, когда какие-либо tr из таблицы тя При наличии видимости вам нужно иметь MutationObserver, наблюдая за tr строк. Для того, чтобы добавить мутации наблюдателя можно написать код так:

var observer = new MutationObserver(function(mutations) { 
    var count = getTableRowCount(document.getElementById('myTable')); 
    document.getElementById('rowsNumber').innerHTML = 'Total rows = ' + count; 
    }); 

//find the target on which to observe 
var target = document.querySelector('table tr'); 

observer.observe(target, { 
    attributes: true 
}); 

Answer 2

пожалуйста, попробуйте сильфона код

var table = document.getElementById('myTable'); 
 
document.getElementById("rowscount").innerHTML = table.childNodes.length;

<p id="rowscount"></p> 
 
<table id="myTable"> 
 

 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    </tr> 
 
    <tr> 
 
    <td>One</td> 
 
    <td>Two</td> 
 
    </tr> 
 

 
</table>