Supprimer HTML ligne de la table de manière dynamique à l'aide de javascript avec index de ligne avec un lien

Je voulais dynamiquement ajouter/supprimer des lignes de la table en HTML. Je sais qu'il y a beaucoup de questions dans ce forum avec de requête similaire. Mon doute est de faire de la suppression de l'action applicables pour chacune des lignes. Pour cela, j'ai été en utilisant les index de la table.

//Link
var cell7 = row.insertCell(6);
var element7 = document.createElement("a");
var text = document.createTextNode("Delete");
element7.appendChild(text);
element7.setAttribute("href","javascript:deleterow("+rowcount+")");
element7.name="reqlink[]";
cell7.appendChild(element7);

Ici rowcount est l'indice de l'ajoutés à la ligne. Ainsi, alors que l'ajout de la ligne, j'définir la suppression de l'action ainsi. Donc, il y aura un lien pour le supprimer pour chaque ligne. Cependant, le problème est l'indice varie de façon dynamique. Donc, cette solution fonctionne pas vraiment.

S'il vous plaît pouvez-vous aider? Je ne veux pas utiliser la case à cocher tel que défini par l'un de la solution.

La ligne supprimer la fonction est scripté comme suit:

function deleterow(index){
    alert('working' + index);
    table.deleteRow(index);
}

######### Essayé ce ###########

//Link
var cell7 = row.insertCell(6);
var element7 = document.createElement("a");
var text = document.createTextNode("Delete");
element7.appendChild(text);
element7.setAttribute("href","javascript:deleterow(this); return false");
element7.name="reqlink[]";
cell7.appendChild(element7);

De la "ce" points de fenêtre et de ne pas la ligne de la table..

Donner à chacune des lignes de votre tableau d'un Identifiant unique et d'utiliser cet identifiant pour supprimer la ligne. Sinon, vous pourriez passer le parent de ligne dans la fonction au lieu d'un numéro spécifique.
exemple, s'il vous plaît.. Suis insertion d'une ligne avec ce code: var ligne = table.insertRow(nombre de lignes);
Puis-je vous suggérer de commencer upvoting certaines des réponses que vous obtenez? 🙂

InformationsquelleAutor Hariprasauth Ramamoorthy | 2014-01-10

4

Solution est de passer la ligne actuelle de l'élément de la deleteRow de la fonction et de l'enlever à l'aide de son élément parent(vous ne pouvez pas supprimer directement), de sorte que la fonction ressemblera à ceci:
```
 var deleteRow = function (link) {
     var row = link.parentNode.parentNode;
     var table = row.parentNode; 
     table.removeChild(row); 
 }
```
HTML pour supprimer le lien est le suivant
```
<a onclick="javascript:deleteRow(this); return false;">
```
Utiliser la ligne suivante pour créer un élément de manière dynamique(attention également avec les caractères majuscules et minuscules):
```
element7.setAttribute("onclick","deleteRow(this); return false");
```
Donc, en utilisant l'IDENTIFIANT de la suppression de lignes est inutile. Espérons que cela aidera.
- Merci pour la réponse. Toutefois, "ce" n'est pas passé. Sa fenêtre.. Maintenant la définition de ligne..
- Mon erreur, ne pas pensé tableaux. Ce code fonctionne. var deleteRow = function (lien) { var ligne = lien.parentNode.parentNode; var tableau = ligne.parentNode; le tableau.removeChild(row); }
- Désolé, je ne suis pas à l'obtenir. S'il vous plaît pouvez-vous modifier la réponse? Je suis l'ajout de la table de manière dynamique à l'aide de javascript..
- Édité le commentaire. Utiliser la propriété surclic (onclick) plutôt que sur le href. Il peut aider.
InformationsquelleAutor Vlad
1

ne pas utiliser l'index de la ligne. il est faux à bien des niveaux. imaginez u supprimé 1er 3 cellules et de votre index a changé. si vous souhaitez supprimer la 4e ligne, il sera effectivement supprimer 7e ligne au lieu de la 4e ligne de votre table.

ajouter un "data-id" dans votre qui a un id unique pour chaque ligne.
l'utiliser pour supprimer la ligne.

MEILLEURE SOLUTION:
c'est en jQuery afin de trouver le js prototype équivalent.
```
$(this).closest("tr").html("")
```
et $(this) est votre bouton est cliqué. donc, ne le js équivalent de la ci-dessus pour le "clic" de l'événement du bouton.
- Ce n'est plus proche de la moyenne?
- en jQuery le plus proche vous donne le premier élément qui est dans la hiérarchie des DOM qui a l'élément que vous appelez le plus proche. api.jquery.com/closest
InformationsquelleAutor Aditya Shedge

    according to Aditya Shedge use closest itself. u can see closet definition here: http://api.jquery.com/closest/


here is an example:

<table id="foo" border="1">
            <tr>
                <td>check</td>
                <td><input type="text></td>
                    <td><input type="text></td>
                <td><input type="button" class="addButton" value="add"/></td>
                <td><input type="button" class="deleteButton" value="delete"/></td>
            </tr>
        </table>


<script>
$(function(){
    $(".addButton").click(function(){
        $(this).closest("tr").clone(true).appendTo("#foo");
    });

    $(".deleteButton").click(function(){
        $(this).closest("tr").remove();
    });
});
</script>

suis l'ajout de la ligne dynamiquement.. ce n'est pas de travail pour que le scénario..

InformationsquelleAutor logan Sarav

Vous devez vous connecter pour publier un commentaire.