如何通过更改属性来重新排序输入字段?

时间:2009-12-09 17:51:15

标签: jquery attributes element

在调用函数时,如何重新排序输入?

ie:当点击a2删除按钮时,我有a1,a3和a4我想重新排序,以便它是a1,a2(是a3)和a3(是a4)。我知道如何手动执行此操作,但如何动态编写?

脚本:

    
    $(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;
        });
    });
    

这是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>

2 个答案:

答案 0 :(得分:2)

在每个输入字段中添加class="renameable",然后执行以下操作:

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

答案 1 :(得分:1)

如果您可以轻松选择所有输入,只需遍历所有输入并重命名。

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

然而问题出现了,为什么你需要这样做?您可以为它们提供相同的名称,大多数服务器站点的东西应该能够为您提供值列表。