Comment réorganiser mon champ de saisie en modifiant l'attribut?

Question

Comment réorganiser mes entrées lorsque ma fonction est appelée?

IE: Lorsque le bouton de suppression A2 est cliqué maintenant, j'ai A1, A3 et A4, je veux réorganiser cela afin qu'il soit A1, A2 (était A3) et A3 (était A4). Je sais comment faire cela manuellement, mais comment puis-je l'écrire dynamiquement?

Scénario:

    
    $(function(){
        $('.deleteMe').click(function(){
            $(this)
                .parent()
                .parent()
                .remove();
            //rename the attribute
            ???
            $('#a3').attr('name', 'a2') //a3 becomes a2
            $('#a4').attr('name', 'a3') //a4 becomes a3
            return false;
        });
    });
    

Voici le HTML:

<form name="myform" id="myform" method="post">
<table>
<tr>
  <td><input type="text" name="a1" id="a1" /></td>
  <td><input type="button" class="deleteMe" name="deleteMe" id="deleteMe" value="a1" /></td>
</tr>
<tr>
  <td><input type="text" name="a2" id="a2" /></td>
  <td><input type="button" class="deleteMe" name="deleteMe" id="deleteMe" value="a2" /></td>
</tr>
<tr>
  <td><input type="text" name="a3" id="a3" /></td>
  <td><input type="button" class="deleteMe" name="deleteMe" id="deleteMe" value="a3" /></td>
<tr>
</tr>
  <td><input type="text" name="a4" id="a4" /></td>
  <td><input type="button" class="deleteMe" name="deleteMe" id="deleteMe" value="a4" /></td>
</tr>
</table>
</form>

Answer 1

Si vous pouvez facilement sélectionner toutes vos entrées, il suffit de parcourir tous et de renommer.

container = $(this).parent().parent().parent();
// (delete input)
$(container).find("input:text").each(function(index) {
    $(this).attr("name", "a" + index);
});

Cependant, la question se pose, pourquoi avez-vous besoin de le faire? Vous pouvez simplement les donner au même nom, et la plupart des éléments du site serveur devraient pouvoir vous obtenir une liste de valeurs.

Answer 2

Ajouter un class="renameable" Sur chacun de ces champs d'entrée, puis faites quelque chose comme ceci:

$(function(){
  $('.deleteMe').click(function(){
    $(this).parent().parent().remove();
    $('#myForm').find('.renameable').each(function(i){
      $(this).attr('name', 'a'+i);
    });
    return false;
  });
});