Introducción: el método TableRow insertCell() en HTML DOM se usa para agregar una sola celda a una fila actual en cualquier posición en particular. Es un método predefinido del objeto TableRow.
Sintaxis:
tablerowObject.insertCell(index)
Valores paramétricos:
- índice: Contiene un numérico que parte de 0 que indica la posición de la celda a insertar en una fila actual. También se puede utilizar el valor de -1.
Nota:
- El parámetro debe definirse obligatoriamente en el navegador Firefox y Opera. por otro lado es opcional en navegadores safari, chrome e IE.
- Si este parámetro no contiene ningún valor, entonces insertCell() agrega la nueva celda en la última posición en IE y en la primera posición en Chrome y Safari.
Ejemplo 1: En este ejemplo, insertaremos la celda en la primera posición usando el método DOM TableRow insertCell().
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM TableRow insertCell() Method
</title>
<style>
table,
td {
border: 1px solid green;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
HTML DOM TableRow insertCell() Method
</h2>
<table align="center">
<tr id="gfg">
<td>GEEKS</td>
<td>FOR</td>
</tr>
</table>
<br>
<button onclick="row()">
Add cell at last Position
</button>
<script>
function row() {
var MyCell =
document.getElementById("gfg");
var AddCell = MyCell.insertCell(-1);
AddCell.innerHTML = "GEEKS";
}
</script>
</body>
</html>
Producción:
Ejemplo 2: En este ejemplo, insertaremos la celda en la última posición usando el método DOM TableRow insertCell().
HTML
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM TableRow insertCell() Method
</title>
<style>
table,
td {
border: 1px solid green;
}
h1 {
color: green;
}
h2 {
font-family: Impact;
}
body {
text-align: center;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<h2>
HTML DOM TableRow insertCell() Method
</h2>
<table align="center">
<tr id="gfg">
<td>GEEKS</td>
<td>FOR</td>
</tr>
</table>
<br>
<button onclick="row()">
Add cell at last Position
</button>
<script>
function row() {
var MyCell =
document.getElementById("gfg");
var AddCell = MyCell.insertCell(-1);
AddCell.innerHTML = "GEEKS";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA