【问题标题】:How do I reorder my input field by changing the attribute?如何通过更改属性重新排序我的输入字段?
【发布时间】:2009-12-09 17:51:15
【问题描述】:

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

ie:现在单击 a2 删除按钮时,我有 a1、a3 和 a4,我想重新排序,使其分别为 a1、a2(原为 a3)和 a3(原为 a4)。我知道如何手动执行此操作,但是如何动态编写它?

脚本:

$(函数(){ $('.deleteMe').click(function(){ $(这个) .parent() .parent() 。消除(); //重命名属性 ??? $('#a3').attr('name', 'a2') //a3变成a2 $('#a4').attr('name', 'a3') //a4变成a3 返回假; }); });

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

【问题讨论】:

    标签: jquery attributes element


    【解决方案1】:

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

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

    【讨论】:

      【解决方案2】:

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

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

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

      【讨论】:

      • 马蒂,非常感谢!!!在我正在处理的程序中,我实际上有一个输入文本和一个复选框。如果不是全部选中,我将不知道哪个复选框属于什么。
      猜你喜欢
      • 2023-03-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-03-27
      • 2020-03-04
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多