Las colecciones de celdas HTML DOM TableRow se utilizan para devolver todo el número total de celdas de una fila particular en la tabla. Incluye todos los elementos <td> y <th>. La secuencia de los elementos <tr> se ordena de la misma manera que su posición en el código fuente.
Sintaxis:
tableObject.cells
Propiedades:
- length: Se utiliza para devolver el número de elementos <td> y <th> en la colección.
Métodos:
- [índice]: se utiliza para devolver el elemento <td> y <th> de la colección con un índice especificado. Si el número de índice está fuera de rango, devolverá nulo.
- item(index): También se utiliza para devolver el elemento <td> y <th> de la colección con un índice especificado. Si el número de índice está fuera de rango, devolverá nulo.
- namedItem(id) : también se usa para devolver el elemento <td> y <th> de la colección con una identificación específica. Si la identificación no existe, el valor devuelto es nulo.
Valor de retorno : se utiliza para devolver todos los elementos <td> y <th> de una fila en particular en la tabla.
El siguiente ejemplo ilustra la implementación de la colección de celdas TableRow.
Ejemplo:
HTML
<!DOCTYPE html> <html> <head> <title>TableRow cells Collection in HTML</title> <style> table, td { border: 1px solid green; } h1 { color: green; } h2 { font-family: sans-serif; } body { text-align: center; } </style> </head> <body> <h1>GeeksforGeeks</h1> <h2>HTML DOM TableRow cells Collection</h2> <p> To return the number of cells in the table, double-click on the "Return cells" button. </p> <table id="Courses" align="center"> <caption> GeeksforGeeks Courses </caption> <tr> <td>Front-end Development</td> <td>HTML</td> <td>CSS</td> <td>JS</td> </tr> <tr> <td>Back-end Development</td> <td>PHP</td> <td>Java</td> <td>Python</td> </tr> <tr> <td>Placements Courses</td> <td>DSA Algorithms</td> <td>Interview questions on Advanced DSA</td> <td>Aptitude & Logical Reasoning</td> </tr> </table> <br /> <button onclick="rowCount()">Return Cells</button> <p id="test"></p> <script> function rowCount() { // Number of rows. var row = document.getElementById("Courses") .rows[2].cells.length; document.getElementById("test").innerHTML = " Number of cells in the 3rd row: " + row; } </script> </body> </html>
Producción:
Navegadores compatibles:
- Google Chrome 1.0 y superior
- Internet Explorer 5.5 y superior
- Microsoft Edges 12.0 y superior
- Firefox 1.0 y superior
- Safari 3.0 y superior
- Ópera 12.1 y superior
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA