Dada una tabla HTML y la tarea es eliminar cierta columna de la tabla HTML. Hay dos enfoques que se analizan a continuación:
Enfoque 1: Primero, seleccione la tabla y también obtenga las filas de la tabla usando table.rows . Obtén el número de columnas de una fila y recorre cada una de las columnas. Use str.search («someColumnName») (porque queremos eliminar la columna con algún columnName) para que coincida con el nombre de la columna actual y el nombre de la columna que queremos eliminar. Si el nombre de la columna coincide, elimine todas sus celdas con el método .deleteCell(i) (donde i es el índice de la columna) recorriendo cada fila de la tabla.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to Remove Column from
HTML Table using JavaScript ?
</title>
<style>
#myCol {
background: green;
}
table {
color: white;
margin: 0 auto;
}
td {
padding: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<table id="table">
<colgroup>
<col id="myCol" span="2">
<col style="background-color:green">
</colgroup>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr>
<td>Geek_1</td>
<td>GeekForGeeks</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN" style="color:green;
font-size: 20px; font-weight: bold;">
</p>
<script>
function Geeks() {
var el_down = document.getElementById("GFG_DOWN");
var tble = document.getElementById('table');
var row = tble.rows; // Getting the rows
for (var i = 0; i < row[0].cells.length; i++) {
// Getting the text of columnName
var str = row[0].cells[i].innerHTML;
// If 'Geek_id' matches with the columnName
if (str.search("Geek_id") != -1) {
for (var j = 0; j < row.length; j++) {
// Deleting the ith cell of each row
row[j].deleteCell(i);
}
}
}
el_down.innerHTML =
"Column is removed from the table.";
}
</script>
</body>
</html>
Producción:
Enfoque 2: seleccione la tabla y obtenga las filas de la tabla usando table.rows para recorrer toda la tabla. Obtenga el índice de la columna en una variable (Columna que queremos eliminar). Elimine cada celda con el método .deleteCell(i) (donde i es el índice de la columna) recorriendo cada fila de la tabla.
Ejemplo: Este ejemplo implementa el enfoque anterior.
<!DOCTYPE HTML>
<html>
<head>
<title>
How to Remove Column from HTML
Table using JavaScript ?
</title>
<style>
#myCol {
background: green;
}
table {
color: white;
margin: 0 auto;
}
td {
padding: 10px;
}
</style>
</head>
<body style="text-align:center;">
<h1 style="color:green;">
GeeksForGeeks
</h1>
<table id="table">
<colgroup>
<col id="myCol" span="2">
<col style="background-color:green">
</colgroup>
<tr>
<th>S.No</th>
<th>Title</th>
<th>Geek_id</th>
</tr>
<tr>
<td>Geek_1</td>
<td>GeekForGeeks</td>
<th>Geek_id_1</th>
</tr>
<tr>
<td>Geek_2</td>
<td>GeeksForGeeks</td>
<th>Geek_id_2</th>
</tr>
</table>
<br>
<button onclick="Geeks()">
Click here
</button>
<p id="GFG_DOWN" style="color:green;
font-size: 20px; font-weight: bold;">
</p>
<script>
function Geeks() {
var el_down = document.getElementById("GFG_DOWN");
// Getting the table
var tble = document.getElementById('table');
// Getting the rows in table.
var row = tble.rows;
// Removing the column at index(1).
var i = 1;
for (var j = 0; j < row.length; j++) {
// Deleting the ith cell of each row.
row[j].deleteCell(i);
}
el_down.innerHTML =
"Column is removed from the table.";
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA