Question

<head>
<script language="javascript">
// must have the onload handler
onload = function countRows(){
    var rows = document.getElementById('myTableId').getElementsByTagName('tbody')[0].rows.length;
    alert( rows);
// outputs 3
}

</script>
</head>

<body>
    <table id="myTableId">
        <tbody>
            <tr><td></td><td><input onclick="doA_Function_That_Includes_CountRows()" />
            </td></tr>
            <tr><td></td><td></td></tr>
            <tr><td></td><td></td></tr>
        </tbody>
    </table>
</body>
</html>

Answer 1

试试这个：

var rows = document.getElementById('myTableId').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;

http://jsfiddle.net/y8URn/

它会计算<tr>中<tbody>的数量，而<thead>则是表格中的行数。

请注意，它不会仅计算表格中表格中的所有行。如果您在tbody之外有<tfoot>或{{1}}甚至一行，则不会计算在内。

Answer 2

另一种方法，使用rows property ^[MDN]：

var num = document.getElementById('myTableId').rows.length;

如果您只想计算第一个tbody元素中的行，请先选择它（tBody property ^[docs]）

var num = document.getElementById('myTableId').tBodies[0].rows.length;

Answer 3

这是一个有效的实施方案：

var table = document.getElementById("myTableId");
var tbody = table.tBodies[0];
alert(tbody.rows.length);

示例jsFiddle：http://jsfiddle.net/9a6zK/

Answer 4

尝试：

var numberOfRows = document.getElementById('myTableId').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;

使用jquery计算表中的行数

4 个答案: