En este artículo veremos cómo obtener la sexta celda de una tabla de 3×3 en jQuery. Para encontrar el n-ésimo hijo de un elemento, podemos usar el selector de n-ésimo hijo de jQuery.
Enfoque: la sexta celda de una tabla de 3 × 3 se puede encontrar usando la siguiente llamada jQuery:
$('#table1 tr:nth-child(2) td:nth-child(3)').text();
Si la tabla tiene encabezados de columna, la sexta celda se puede encontrar usando la siguiente llamada.
$('#table1 tr:nth-child(3) td:nth-child(3)').text();
Código HTML: tenga en cuenta que el índice del selector de nth-child está basado en 1.
HTML
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src=
"https://code.jquery.com/jquery-3.6.0.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#btnGetValue').click(function () {
$('#value').text($(
'#table1 tr:nth-child(3) td:nth-child(3)').text());
});
});
</script>
</head>
<body style="text-align:center">
<table id="table1" style=
"width:100%" border="1">
<tr>
<th>
Header1
</th>
<th>
Header2
</th>
<th>
Header3
</th>
</tr>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
<tr>
<td>Cell 4</td>
<td>Cell 5</td>
<td>Cell 6</td>
</tr>
</table>
<br>
<input type="button"
value="Get 6th Cell's value"
id="btnGetValue" />
<span id="value"></span>
</body>
</html>
Salida: Vemos la siguiente página web.
- Antes de hacer clic:
- Después de hacer clic:
Verá el valor de la sexta celda junto al botón (resaltado en un rectángulo rojo)
Después de hacer clic en la salida
Publicación traducida automáticamente
Artículo escrito por syedfaisalmca y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA