jQuery Girl
  1. jQuery Girl
  3. Comment lire la valeur td de la ligne de table HTML générée dynamicment?
Intereting Posts
Ciblez plusieurs sélecteurs dans JS uniquement jQuery: comment envoyer un formulaire avec les valeurs saisies par l’utilisateur? Toutes les versions hébergées de jQuery ayant l’en-tête ‘Access-Control-Allow-Origin: *’? Inverse de “scrollTop” dans jQuery comment configurer ce cookie pour qu’il n’expire jamais Appliquer une classe CSS à un élément basé sur un mot clé dans l’URL avec jQuery? L’événement du bouton ne fonctionne pas après avoir cliqué sur le titre du bouton ou sur l’icône du bouton comment appliquer la sélection d’éléments jQuery à une variable de chaîne jQuery ajax appelle async: false vs async: true Comment mettre un rappel dans le programme d’écoute de soumission d’événements afin d’attendre la réponse de l’utilisateur à l’invite de jQuery impromptu? jquery sortinggger ctrl + click $ (window) .resize (): avant Éléments jQuery créés à l’aide de .append (html) non disponible La réponse à la boucle JSON échoue Erreur 406 non acceptable lors de l’utilisation de Jquery $ .post dans Firefox mais pas dans Safari ou Chrome

Comment lire la valeur td de la ligne de table HTML générée dynamicment?

Dans mon application, je dois entrer toutes les valeurs d’entrée dans les contrôles d’entrée (TextBoxes).

Ensuite, insérez ces valeurs dans une table sous forme de ligne. Ici, je vérifiais les valeurs redondantes de EmpNo. Le bouton de suppression sera généré dynamicment avec l’ID lors de l’insertion de la ligne du tableau.

Maintenant, je dois supprimer la ligne lorsque le bouton Supprimer est cliqué

Comment sélectionner la ligne d’un bouton de suppression sélectionné? et le retirer de la table?

entrez la description de l'image ici

Démo sur JSFiddle 

$("#btnInsert").click(function () { var eNo = $("#txtEmpNo").val(); var eName = $("#txtEmpName").val(); var sal = $("#txtSalary").val(); var deptNo = $("#txtDeptNo").val(); var rowCnt = $("#tblBody tr").size(); if (eNo == "" && eName == "" && sal == "" && deptNo == "") { alert("Enter values"); } else { if (rowCnt == 0) { $("" + eNo + "" + eName + "" + sal + "" + deptNo +" ").appendTo("#tblBody"); $("input[id^=txt]").val(""); $("input[id^=btnDelete]").bind("click", function () { alert("delete button is clicked"); }); } else { var dupCount = 0; for (var i = 0; i < rowCnt; i++) { var num = $("#Items" + i).html().toString(); if (eNo == num) { dupCount++; } } if (dupCount == 0) { $("" + eNo + "" + eName + "" + sal + "" + deptNo + " ").appendTo("#tblBody"); $("input[id^=txt]").val(""); $("input[id^=btnDelete]").bind("click", function () { alert("delete button is clicked"); }); } else { alert("Your entered EmpNo is already exists in the table !"); } } } })

Voici votre FIDDLE mis à jour.

Voici la ligne importante:

JS 

 $(this).parent().parent().remove();

Je viens d’utiliser votre événement click pour déclencher le .remove ().

La solution simple est de lire l’entrée et d’append le code HTML à la table: 

 var rowid = 0; function addRow(empno, name, sal, deptno){ rowid = "tableRow" + tableid; var row = ""+ empno+""+ ""+ name+""+ ""+ sal+""+ ""+deptno+""; $("tbody").append(row); id+=1; } function removeRow(rowid){...}

Ce code ajoute à la table. Ainsi, lors de la saisie, vous devez lire les valeurs correctement.

Générez les ID de ligne et de bouton de manière cohérente (comme DelButton1, Row1; DelButton2, Row2, etc.). Ensuite, dans le gestionnaire d’événements Suppression de boutons, obtenez l’identifiant de l’appelant, utilisez-le pour déterminer l’identifiant de la ligne qui l’accompagne et supprimez cette ligne.

Notez également que pour supprimer un élément, vous devez utiliser removeChild () sur le parent de cet élément.

Sinon, si vous avez l’object bouton Supprimer, vous pouvez utiliser: 

 .parentNode.parentNode

pour obtenir l’élément tr (le premier parentNode obtient l’élément td dans lequel se trouve le bouton, le second le tr). Notez que si vous avez d’autres balises autour du bouton avant le tr, cela signifie que vous devez appeler plusieurs fois parentNode.

s’il vous plaît essayez ceci 

  //=======remove dyanamic file=====// $(document).on("click", "#btnDelete", function () { $(this).closest("#YourtrID").remove(); });

ça marche