0

Estoy intentando eliminar las dos columnas promedio de la tabla con javascript, he comprobado que el codigo que tengo me permite eliminar cualquier columna antes del primer colspan pero si intento eliminar una columna despues del primer colspan me dice que no existen mas columnas

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

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

tambien intente eliminar con el queryselector pero nada de resultados

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

Tabla de Ejemplo:

tabla de ejemplo

<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>

2
  • 1
    Te falta una comilla en el id de tu tabla, la comilla de cierre Commented el 20 oct. 2022 a las 18:22
  • El querySelector y getElementById no está encontrando a #tabla nunca... Commented el 20 oct. 2022 a las 18:33

1 respuesta 1

0

asi se hace, recorres las filas y eliminas la columna por fila

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>

1
  • muchas gracias por tu respuesta, me ha funcionado al 100% Commented el 20 oct. 2022 a las 19:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.