0

Para eliminar la primera columna de la tabla del siguiente documento html. ¿cómo sería la forma correcta trabajando con DOM?

function del_Col(){
  var elimina2=document.getElementById("sampleTable");
  var eliminaCol=elimina2.getElementsByTagName("td");
  eliminaCol[0].parentNode.removeChild(eliminaCol[0]);
}
<table id="sampleTable" border="1">
  <tbody>
    <tr>
      <td>Row1 cell1</td>
      <td>Row1 cell2</td>
    </tr>
    <tr>
      <td>Row2 cell1</td>
      <td>Row2 cell2</td>
    </tr>
  </tbody>
</table>
<br />
<a href="javascript:del_Col()">Del col</a>

introducir la descripción de la imagen aquí

3 respuestas 3

0

Hola una de las posibles formas de hacerlo

let boton = document.querySelector('a');
boton.onclick = del_Col;
function del_Col(){
    let elimina2=document.getElementById("sampleTable");
    let eliminaCol=elimina2.getElementsByTagName("tr");
    for (let i = 0; i < eliminaCol.length; i++) {
        let eliminaCel=eliminaCol[i].getElementsByTagName("td");
        eliminaCol[i].removeChild(eliminaCel[0]);       
    }    
}
<table id="sampleTable" border="1">
  <tbody>
    <tr>
      <td>Row1 cell1</td>
      <td>Row1 cell2</td>
    </tr>
    <tr>
      <td>Row2 cell1</td>
      <td>Row2 cell2</td>
    </tr>
  </tbody>
</table>
<br />
<a href="javascript:">Del col</a>

Espero que te sirva. Saludos.

0

Así es como lo haría: por vavor lea los comentarios en el código

//selecciona la table
var tabla = document.getElementById("sampleTable");
//todos los elementos tr de la tabla
var trs = tabla.querySelectorAll("tr");

//al hacer click en borrar
borrar.addEventListener("click",()=>{
  //borra el segundo td (index 1) de cada tr. 
  trs.forEach(tr=>{tr.removeChild(tr.childNodes[1]); })
})
<table id="sampleTable" border="1">
<tbody>
<tr><td>Row0 cell0</td><td>Row0 cell1</td><td>Row0 cell2</td><td>Row0 cell3</td></tr>
<tr><td>Row1 cell0</td><td>Row1 cell1</td><td>Row1 cell2</td><td>Row1 cell3</td></tr>
<tr><td>Row2 cell0</td><td>Row2 cell1</td><td>Row2 cell2</td><td>Row2 cell3</td></tr>
</tbody>
</table><br>
<p id="borrar">Borra la segunda columna!</p>

0

Segun la estructura de su tabla, solo debe asegurarse de capturar la primera celda td dentro de cada fila tr y borrarla del DOM

function del_Col(){
   let td = document.querySelectorAll('#sampleTable tr td:nth-child(1)');
   // selecionar el primer td dentro de cada tr en tu tabla #sampleTable
   td.forEach( (el)=>{ el.remove() } ) // y remueves cada una del DOM 
}
<table id="sampleTable" border="1">
  <tbody>
    <tr>
      <td>Row1 cell1</td>
      <td>Row1 cell2</td>
    </tr>
    <tr>
      <td>Row2 cell1</td>
      <td>Row2 cell2</td>
    </tr>
  </tbody>
</table>
<br />
<button onclick="del_Col()">Del</button>

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.