2012-04-06 80 views
25

列数我有类似的一个表来的Javascript:伯爵表行

<table id="table1"> 
<tr> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 
</tr> 
<tr> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 
</tr> 
<table> 

我想算成一排TD元素的数量。我正在尝试

document.getElementById('').cells.length; 
document.getElementById('').length; 
document.getElementById('').getElementsByTagName('td').length; 

没有显示实际结果。

+0

你必须使用jQuery FGS – 2012-04-06 12:58:41

+0

由fo你可以得到表中的行数: document.getElementById('someid')。getElementsByTagName('tr')。length; – 2012-10-12 04:20:37

+3

@pinouchon当有人要求Javascript的解决方案时,“你必须使用jQuery”不是一个答案。 – Rodrigo 2015-12-29 13:21:36

回答

41
document.getElementById('table1').rows[0].cells.length 

细胞不是表的属性,行是。细胞是一排虽然

+2

这只适用于简单的情况,其中所有单元格的colspan = 1,并且所有行都具有相同的列数。 (HTML允许行具有不同数量的列,在这种情况下,列最少的行会在末尾变为空白。) – 2013-09-03 15:14:46

+1

不确定你的意思。问题是关于连续的单元格。如果colspan = 2并且缺少两个仍然意味着只有一个单元格。 虽然在使用rowspan时会有些困惑,但它仍然是正确的,请参阅此小提琴:http://jsfiddle.net/GF6Dr/ 如果您想要一个表中有多少个单元格,然后执行max的所有细胞。 – 2013-09-03 19:23:28

1

首先,当您拨打getElementById时,您需要提供一个ID。 o_O

你的dom中唯一一个id是table元素。如果可以的话,你可以添加ID(确保它们是唯一的)到你的tr元素。

或者,您可以使用getElementsByTagName('tr')获取文档中tr元素的列表,然后获取tds的数量。

here is a fiddle that console logs the results...

-2
$('#table1').find(input).length 
+1

描述你的答案更详细! – 2015-10-15 07:02:09

0
<table id="table1"> 
<tr> 
    <td colspan=4><input type="text" value="" /></td> 

</tr> 
<tr> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 
    <td><input type="text" value="" /></td> 

</tr> 
<table> 
<script> 
    var row=document.getElementById('table1').rows.length; 
    for(i=0;i<row;i++){ 
    console.log('Row '+parseFloat(i+1)+' : '+document.getElementById('table1').rows[i].cells.length +' column'); 
    } 
</script> 

结果:

Row 1 : 1 column 
Row 2 : 4 column