2011-12-03 54 views
7
<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> 
+0

¿Quieres contar el número de filas en la tabla, o tbody? – Thai

+0

En el tbody. la mesa tiene un encabezado y otras filas fuera del tbody que no quiero contar. – phpmeh

Respuesta

15

Prueba esto:

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

http://jsfiddle.net/y8URn/

Se cuenta el número de <tr> s en el <tbody>, que a su vez será el número de filas en la tabla.

tenga en cuenta que no contará todas las filas en la tablasólo en el cuerpo mesa. Si tiene un <thead> o un <tfoot> o incluso una fila fuera del tbody, no se contará.

+0

Parece que no funciona a menos que la función se inicie después del TBODY en el HTML. No puedo poner una llamada a la función en el encabezado. Tengo que ponerlo después del Tbody. – phpmeh

+1

Obviamente. como con cualquier código JavaScript, si el navegador aún no descarga un elemento, no existe en la página. Como buena práctica general, las etiquetas '

1

Probar:

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

Lo había intentado. También regresaba 1. Parece que importa dónde se llama la función. – phpmeh

+1

@phpmeh: ¿Ah, no estaba en un controlador 'onload'? De acuerdo ... póngalo en un controlador 'onload' :) – Ryan

9

Otra forma, utilizando el rows property [MDN]:

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

Si sólo desea contar las filas de la primera tbody elemento, seleccione primero (tBody property [docs])

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

+1 para' tbodies'. No tenía idea de que existiera. – Ryan

+0

Lo tengo para trabajar de esta manera. Me estaba dando 1. Cuando puse la llamada a la función después de mi tbody, funciona. Lamentablemente, necesito llamar a la función al comienzo del Tbody. – phpmeh

+0

@phpmeh: solo puede hacer referencia u obtener información sobre un elemento DOM después de haber sido creado. –

4

Aquí hay una implementación en funcionamiento:

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

Y una muestra de jsFiddle: http://jsfiddle.net/9a6zK/

Cuestiones relacionadas