web-dev-qa-db-fra.com

Supprimer une ligne du tableau après avoir cliqué sur le bouton de suppression d'une ligne du tableau

La solution peut utiliser jQuery ou être du code JavaScript simple.

Je souhaite supprimer une ligne de la table après que l'utilisateur a cliqué sur le bouton correspondant contenu dans la cellule de la ligne de la table, par exemple:

<script>
function SomeDeleteRowFunction() {
 //no clue what to put here?
}
</script>

<table>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
   <tr>
       <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>
   </tr>
</table>
javascriptjqueryhtml-tablerow
20
like-a-trainee

Vous pouvez utiliser jQuery click au lieu d'utiliser l'attribut onclick. Essayez ce qui suit:

$('table').on('click', 'input[type="button"]', function(e){
   $(this).closest('tr').remove()
})

Démo

34
undefined

vous pouvez le faire comme ceci:

<script>
    function SomeDeleteRowFunction(o) {
     //no clue what to put here?
     var p=o.parentNode.parentNode;
         p.parentNode.removeChild(p);
    }
    </script>

    <table>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
       <tr>
           <td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this)"></td>
       </tr>
    </table>
27
Siren

La solution suivante fonctionne bien.

HTML:

<table>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
  <tr>
    <td>
      <input type="button" value="Delete Row" onclick="SomeDeleteRowFunction(this);">
    </td>
  </tr>
</table>

JQuery:

function SomeDeleteRowFunction(btndel) {
    if (typeof(btndel) == "object") {
        $(btndel).closest("tr").remove();
    } else {
        return false;
    }
}

J'ai fait des bacs sur http://codebins.com/bin/4ldqpa9

5
gaurang171

Utiliser du Javascript pur:

Il n'est pas nécessaire de passer this à la SomeDeleteRowFunction():

<td><input type="button" value="Delete Row" onclick="SomeDeleteRowFunction()"></td>

La fonction onclick:

function SomeDeleteRowFunction() {
      // event.target will be the input element.
      var td = event.target.parentNode; 
      var tr = td.parentNode; // the row to be removed
      tr.parentNode.removeChild(tr);
}
1
A-Sharabiani