Je veux générer une table avec le contenu du tableau avec une option pour supprimer les lignes. J'ai reçu un bloc de code de base qui, je pense, devrait fonctionner, mais il ne fait rien et cela me donne l'erreur "Uncaught SyntaxError: Unxpected token}".

function newtest2() {
  $(this).parents('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}
#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>
2
MrDarkness96 17 avril 2018 à 16:06

6 réponses

Meilleure réponse

Vous passez this sur le HTML - newtest2(this).

Sur votre fonction, vous devez recevoir la variable et l'utiliser pour supprimer le <tr>

 function newtest2(e) {              //Add e as parameter
      $(e).parents('tr').remove();   //Use the e to delete
 }

Voici l'extrait:

function newtest2(e) {
  $(e).parents('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}
#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>
1
Eddie 17 avril 2018 à 13:11

Vous devez spécifier un argument dans votre fonction, puis vous devez obtenir le parent du parent de l'élément this, car il s'agit d'un bouton et non de <td>.

Voici un exemple de travail. Notez qu'il pourrait y avoir une meilleure façon de le faire avec les événements de clic et les id s

function newtest2(evt) {
  $(evt).parent().parent().remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}
#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>
2
N. Ivanov 17 avril 2018 à 13:12

this ne fait pas référence à TABLE / BUTTON dans la méthode newtest2(), il fait référence à l'objet window donc le code n'a pas fonctionné.

Acceptez l'argument this dans la fonction et utilisez-le

function newtest2(elem) {
   $(elem).closest('tr').remove();
}
function newtest2(elem) {
  $(elem).closest('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {
    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");
  }
}
#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">
</table>
<br>
<button onclick="newtest()">TEST</button>

Je vous recommande d'utiliser un gestionnaire d'événements discret, utilisez .on() pour attacher un gestionnaire d'événements avec des éléments au lieu d'un laid gestionnaire d'événements en ligne.

Utilisation de la méthode .on() avec Délégation d'événements pour attacher le gestionnaire d'événements pour les éléments dynamiques (bouton Supprimer).

$("#table1").on('click', '.remove', function() {
  $(this).closest('tr').remove();
})

$("#create").on('click', function() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button class='remove' type='button'>Remove</button>" + "</td></tr>");

  }
})
#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button id="create">TEST</button>
2
Satpal 17 avril 2018 à 13:19

Vous ne pouvez pas utiliser $(this) dans votre fonction car elle ne fait pas référence au bouton cliqué.

Puisque vous incluez la fonction à l'intérieur de onclick et passez this comme paramètre, utilisez simplement ce paramètre à l'intérieur de votre fonction, comme ceci

Suggestion secondaire: utilisez .closest ('tr') au lieu de < un href = "https://api.jquery.com/parents/" rel = "nofollow noreferrer">. parents ('tr') , au cas où, vous savez, à l'avenir, vous voudrez peut-être une table à l'intérieur d'une table,;)

function newtest2(caller) {
  $(caller).closest('tr').remove();
}

function newtest() {
  var name = ["Avengers", "Black Mirror", "Star Wars"];
  var r = name.length;
  $("#table1").empty();
  for (var i = 0; i < r; i += 1) {

    $("#table1").append("<tr><td>" + name[i] + "</td><td>" + "<button onclick='newtest2(this)'>Remove</button>" + "</td></tr>");

  }
}
#table1 {
  background: gray;
}

td {
  border: 1px solid black;
  text-align: center;
  color: white;
  font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<table id="table1">

</table>


<br>
<button onclick="newtest()">TEST</button>
1
Scaramouche 17 avril 2018 à 13:11

Essaye ça

 for (var i = 0; i < name.length; i += 1) {
                        $("#table1").append("<tr id=" + name[i] + "><td>" + name[i] + "</td><td>" + "<button id=" + name[i] + " onclick='newtest2(this.id)'>Remove</button>" + "</td></tr>");
                    }



 function newtest2(id) {
            $('#' + id + '').remove();
        }
0
kalai 17 avril 2018 à 13:22

Pour supprimer une ligne en cliquant sur le bouton:

$('#table_id').on('click', '#remButton', function(){
    var indexRow = this.parentNode.parentNode.rowIndex;
    document.getElementById("table_ID").deleteRow(indexRow);
});
1
ArcherBoy27 17 avril 2018 à 13:11