logo标签列表

不使用jQuery计算表格中行数

javascript
9
<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>
你想要计算表格或tbody中的行数吗？ - Thai
在tbody中，表格有一个标题和其他行在tbody之外，我不想计算。 - phpmeh
4个回答
17

试试这个：

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

http://jsfiddle.net/y8URn/

这会计算出<tbody>中的<tr>数量，从而得出表格的行数。

请注意它只会计算表体中的所有行，而不是整个表格。如果您有一个<thead>、<tfoot>甚至在之外的行，它将不被计算在内。

除非在HTML中的TBODY之后启动函数，否则它似乎无法工作。我不能在头部调用该函数。我必须将其放在TBODY之后。 - phpmeh
1
显然，与任何JavaScript代码一样，如果浏览器尚未下载元素，则它不存在于页面上。作为一种通用良好实践，应将具有DOM影响的<script>标签放在<body>元素的底部。 - Madara's Ghost
@phpmeh 当然可以！它无法计算尚未创建的元素。 - Michael Sazonov
@MichaelSazonov 你在跟谁说话？ :P - Madara's Ghost
@MichaelSazonov 如果需要通知他，请使用 @ 符号，就像我正在通知您一样。（否则他将不会收到通知，可能不知道您给他发了消息） - Madara's Ghost
1
@phpmeh，Truth，FutureReaders：当您使用 getElementsByTagName 时，您正在进行 DOM 选择以创建元素的新集合。因为表格和 tbody 维护自己的行集合，所以最好使用它们而不是让浏览器做聚集相同集合的工作。您可以通过 .rows 属性引用该集合。 - RightSaidFred
12

另一种方法是使用rows 属性[MDN]：

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

如果你只想计算第一个 tbody 元素中的行数，请先选中它 (tBody 属性 [文档])

var num = document.getElementById('myTableId').tBodies[0].rows.length;
我用这种方式让它工作了。之前它一直给我1。当我在tbody后调用函数时，它可以工作。不幸的是，我需要在Tbody开始时调用该函数。 - phpmeh
@phpmeh：只有在创建DOM元素之后，才能引用或获取有关其信息。 - Felix Kling
3
你不能看到不存在的行。尽管如此，.rows 集合是动态的，在表格中添加/删除行时会自动更新。 - RightSaidFred
5
这里有一个可行的实现:
var table = document.getElementById("myTableId");
var tbody = table.tBodies[0];
alert(tbody.rows.length);

以下是一个jsFiddle示例：http://jsfiddle.net/9a6zK/

1

尝试：

var numberOfRows = document.getElementById('myTableId').getElementsByTagName('tbody')[0].getElementsByTagName('tr').length;
我已经尝试过了。它也返回1。似乎函数被调用的位置很重要。 - phpmeh
1
@phpmeh：哦，它不在“onload”处理程序中？好的...把它放在“onload”处理程序中 :) - Ry-
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接