Home / Questions / 563382
Accepted
Rafael Serrano
Asked: 2022-10-21 10:08:47 +0800 CST 2022-10-21 10:08:47 +0800 CST

Remove columns from a table containing colspan with javascript

  • 772

I am trying to delete the two average columns of the table with javascript, I have verified that the code I have allows me to delete any column before the first colspan but if I try to delete a column after the first colspan it tells me that there are no more columns

let tabla: any = document.getElementById('tabla')

 let row = tabla.rows;       
for (let j = 0; j < row.length; j++) {
        row[j].deleteCell(2);                      
 }

I also tried to delete with the queryselector but no results

document.querySelector('#tabla .eliminar').remove();

Example Table:

example table

<table class="border border-cyan-800" id='tabla>
    <thead>

        <tr>
            <th rowspan="2">Nombre </th>
            <th rowspan="2"> Apellido </th>
            <th colspan="3"> Valores iniciales </th>
            <th rowspan="2" class="eliminar"> Promedio inicial </th>
            <th rowspan="2"> Media inicial </th>
            <th colspan="3"> Valores finales </th>
            <th rowspan="2" class="eliminar"> Promedio final </th>
            <th rowspan="2"> Media final </th>
        </tr>
        <tr>
            <th> Enero </th>
            <th> Febrero </th>
            <th> Marzo </th>
            <th> Abril </th>
            <th> Mayo </th>
            <th> Junio </th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td> juan </td>
            <td> perez </td>
            <td> 10 </td>
            <td> 20 </td>
            <td> 30 </td>
            <td class="eliminar"> 30 </td>
            <td> 18 </td>
            <td> 5 </td>
            <td> 8 </td>
            <td> 50 </td>
            <td class="eliminar"> 50 </td>
            <td> 50 </td>
        </tr>
    </tbody>
</table>

javascript

1 Answers

  1. Best Answer

    this is how it is done, you go through the rows and eliminate the column by row

    let tabla = document.getElementById('tabla')

 let row = tabla.rows;       
for (let j = 0; j < row.length; j++) {
        let celdas=row[j].cells
      for (let i = 0; i < celdas.length; i++) {
          if(i==3 || i==5){
            celdas[i].remove();
          }
      }        
        
 }
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="border border-cyan-800" id="tabla">
    <thead>

        <tr>
            <th rowspan="2">Nombre </th>
            <th rowspan="2"> Apellido </th>
            <th colspan="3"> Valores iniciales </th>
            <th rowspan="2" class="eliminar"> Promedio inicial </th>
            <th rowspan="2"> Media inicial </th>
            <th colspan="3"> Valores finales </th>
            <th rowspan="2" class="eliminar"> Promedio final </th>
            <th rowspan="2"> Media final </th>
        </tr>
        <tr>
            <th> Enero </th>
            <th> Febrero </th>
            <th> Marzo </th>
            <th> Abril </th>
            <th> Mayo </th>
            <th> Junio </th>
        </tr>
    </thead>

    <tbody>

        <tr>
            <td> juan </td>
            <td> perez </td>
            <td> 10 </td>
            <td> 20 </td>
            <td> 30 </td>
            <td class="eliminar"> 30 </td>
            <td> 18 </td>
            <td> 5 </td>
            <td> 8 </td>
            <td> 50 </td>
            <td class="eliminar"> 50 </td>
            <td> 50 </td>
        </tr>
    </tbody>
</table>

    • 0