Utilisation d'une variable changeante dans nextAll de JQuery()

Question

Avec jquery, j'ajoute dynamiquement des lignes. Pour ce faire, je suis en train de copier le premier de la table et ensuite avec une regex je change les noms et parfois les ids de quelque chose comme "column_name [0]" à "column_name [1]". C'est la regex que j'utilise:

newRow = newRow.replace(new RegExp("\\[[0-9]+][\"\']", "gm"), "[" + $("#rowNum").val() + "]\""); 

Cela fonctionne très bien.

J'ajoute aussi un lien pour supprimer dynamiquement cette ligne. Ce lien de suppression a le JQuery suivant exécuté sur un clic:

$(this).parents(\"tr.deletable\").remove(); 

Ceci fonctionne également bien.

Maintenant, mon problème est lorsqu'un utilisateur ajoute 3 lignes, puis supprime la première ligne. Je veux que les deux dernières lignes décrémentent leur numéro d'index. Par exemple column_name [2] deviendrait column_name [1]. Comment devrais-je faire cela? Voici ce que j'ai essayé jusqu'à présent:

$(this).parents("tr.deletable").nextAll().html().replace(new RegExp("\\[[0-9]+][\"\']", "gm"), "[" + i + "]\""); 

J'ai je mis à 50 juste pour voir si elle met avec succès que comme le nouvel indice, mais il ne fonctionne pas. Je n'ai pas compris en douceur obtenir la valeur décrémentée. Le code ci-dessus ne fonctionne pas.

Quelqu'un at-il des suggestions sur la façon dont je peux accomplir cela? Quant à savoir pourquoi j'ai besoin de faire cela, c'est parce que j'utilise Java Struts et il faut que tous les éléments de formulaire aient un nom avec un index approprié à la fin.

Answer 1

Vous pouvez remonter dans l'arborescence DOM d'un niveau plus et de le faire à partir de là:

$(this).parents("tr.deletable").parent().find("tr.deletable").each(); 

Vous aurez besoin de stocker l'index de la ligne qui a été supprimée. À l'intérieur de chacun d'eux, traitez les lignes dont vous pourriez avoir besoin pour diminuer l'index pour utiliser cette fonction.

function() { 
    var curIndex = parseInt($(this).attr("id").split("[")[1].split("]")[0]); 
    if (curIndex > deletedIndex) { 
    $(this).attr("id", "column_name[" + (curIndex - 1) + "]"); 
    } 
} 

Donc, pour résumer:

// get index of row deleted 
var deletedIndex = parseInt($(this).attr("id").split("[")[1].split("]")[0]); 

// loop through deleted items' siblings 
$(this).parents("tr.deletable").parent().find("tr").each(function() { 
    var curIndex = parseInt($(this).attr("id").split("[")[1].split("]")[0]); 
    if (curIndex > deletedIndex) { 
    $(this).attr("id", "column_name[" + (curIndex - 1) + "]"); 
    } 
}); 

En outre, il pourrait y avoir une meilleure façon de boucle à travers les frères et sœurs de votre ligne supprimée. Comme:

var curSib = $(this).next("tr.deletable"); 
while (curSib.length > 0) { 
    var curIndex = parseInt(curSib.attr("id").split("[")[1].split("]")[0]); 
    if (curIndex > deletedIndex) { 
    curSib.attr("id", "column_name[" + (curIndex - 1) + "]"); 
    } 
    curSib = curSib.next("tr.deletable"); 
} 

Je n'ai pas testé ce code, mais je pense que vous devriez avoir l'idée.

Answer 2

Je pense que la meilleure façon serait de faire plusieurs entrées ont le name de column_name, puis ajouter le [i] que lorsque le formulaire est soumis. Essayez ceci:

$("#Form").submit(function() 
{ 
    $("input[name=column_name]",this).each(function(index) 
    { 
     var name = "column_name["+index+"]"; 
     $(this).attr("name",name); 
    }); 
}