Delete Javascript table row

Question

Delete Javascript table row

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Hello, I have a table, and in each row I have a logo and I would like it to remove it from that row ... My code is this, I leave the function to delete even though this is wrong ... Thanks

<script>
    function createContact(){
            var mitabla = document.getElementById("tableContact");
            var elementos = mitabla.rows.length;
            var row =mitabla.insertRow(elementos);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell5 = row.insertCell(4);
            var cell6 = row.insertCell(5);
            var cell7 = row.insertCell(6);
            
            cell1.innerHTML = '<input type="text" name="fname" size="12">';
            cell2.innerHTML = '<input type="text" name="fname" size="12">';
            cell3.innerHTML = '<input type="text" name="fname" size="12">';
            cell4.innerHTML = '<input type="text" name="fname" size="12">';
            cell5.innerHTML = '<input type="text" name="fname" size="12">'; 
            cell6.innerHTML = '<input type="checkbox" name="email" value="1">';
            cell7.innerHTML = '<img onclick=modificarContacto(); src="../graphics/edita1.jpg" height="20" width="20"><img onclick=eliminarContacto(this);  src="../graphics/delete12.jpg" height="20" width="20">';

                            }
                            
function eliminarContacto(id){
        var row = document.getElementById("");

         document.getElementById("tableContact").deleteRow(row);
        
    }
    
</script>

<body id='bdcuerpo'  name='bdcuerpo'>
    <div class="campoNuevoContact" >
    <table>
        <tr>
            <th>
             <button onclick="createContact()">Nuevo contacto</button> 
             </th>
            </tr>
        </table>
    </div>
<div class="content1">
    <div>
        <table class="contactTable" name="tableContact" id="tableContact">
              <tr>
                 <th class="tableth">Nombre</th>
                 <th class="tableth">Apellidos</th>
                 <th class="tableth">Telefono</th>
                 <th class="tableth">Email</th>
                 <th class="tableth">Cargo</th>
                 <th class="tableth">Permitir emails</th>
                 <th class="tableth">Acciones</th>
              </tr>
              <tr>
                  
                 <th class="filo">1111111</th>
                 <th class="filo">111111</th>
                 <th class="filo">11111</th>
                 <th class="filo">11111</th>
                 <th class="filo">111111</th>
                 <th class="filo"><input type="checkbox" name="email" value="1"></th>
                 <th class="filo">
                    <img onclick=modificarContacto(); onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" src="../graphics/edita1.jpg" height="20" width="20">
                    <img onclick=eliminarContacto(this); onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" src="../graphics/delete12.jpg" height="20" width="20">

                 </th>
              </tr>

   function eliminarContacto(id){
        var row = document.getElementById("");

         document.getElementById("tableContact").deleteRow(row);
        
    }

javascript

asked by Iron Man 16.04.2018 в 09:43

source

2 answers

0

You must know the index to delete the row.

function eliminarContacto(img){
    var rowIndex = img.parentNode.parentNode.parentNode.rowIndex;
    document.getElementById("tableContact").deleteRow(rowIndex);
}

answered by 16.04.2018 в 09:47

PHP - error Recoverable fatal error Generate HTML with Python

score 1 · Accepted Answer

The element that you pass to the function is that of the pressed image. To retrieve the cell or row element you must go through the parent elements.

On the other hand, the deleteRow method must pass the row index that you can obtain from the rowIndex property:

function createContact(){
      var mitabla = document.getElementById("tableContact");
      var elementos = mitabla.rows.length;
      var row =mitabla.insertRow(elementos);
      var cell1 = row.insertCell(0);
      var cell2 = row.insertCell(1);
      var cell3 = row.insertCell(2);
      var cell4 = row.insertCell(3);
      var cell5 = row.insertCell(4);
      var cell6 = row.insertCell(5);
      var cell7 = row.insertCell(6);

      cell1.innerHTML = '<input type="text" name="fname" size="12">';
      cell2.innerHTML = '<input type="text" name="fname" size="12">';
      cell3.innerHTML = '<input type="text" name="fname" size="12">';
      cell4.innerHTML = '<input type="text" name="fname" size="12">';
      cell5.innerHTML = '<input type="text" name="fname" size="12">'; 
      cell6.innerHTML = '<input type="checkbox" name="email" value="1">';
      cell7.innerHTML = '<img onclick=modificarContacto(); src="../graphics/edita1.jpg" height="20" width="20"><img onclick=eliminarContacto(this);  src="../graphics/delete12.jpg" height="20" width="20">';
}
                            
function eliminarContacto(id){
  // cell element
  var cell = id.parentNode;
  // row element
  var row = cell.parentNode;

  document.getElementById("tableContact").deleteRow(row.rowIndex);
}

<body id='bdcuerpo'  name='bdcuerpo'>
    <div class="campoNuevoContact" >
    <table>
        <tr>
            <th>
             <button onclick="createContact()">Nuevo contacto</button> 
             </th>
            </tr>
        </table>
    </div>
<div class="content1">
    <div>
        <table class="contactTable" name="tableContact" id="tableContact">
              <tr>
                 <th class="tableth">Nombre</th>
                 <th class="tableth">Apellidos</th>
                 <th class="tableth">Telefono</th>
                 <th class="tableth">Email</th>
                 <th class="tableth">Cargo</th>
                 <th class="tableth">Permitir emails</th>
                 <th class="tableth">Acciones</th>
              </tr>
              <tr>
                  
                 <th class="filo">1111111</th>
                 <th class="filo">111111</th>
                 <th class="filo">11111</th>
                 <th class="filo">11111</th>
                 <th class="filo">111111</th>
                 <th class="filo"><input type="checkbox" name="email" value="1"></th>
                 <th class="filo">
                    <img onclick=modificarContacto(); onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" src="../graphics/edita1.jpg" height="20" width="20">
                    <img onclick=eliminarContacto(this); onmouseover="this.style.cursor='hand'" onmouseout="this.style.cursor='default'" src="../graphics/delete12.jpg" height="20" width="20">

                 </th>
              </tr>