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