0

我列出了用户可以随意添加/删除输入字段行的组件列表，因此用户可以自由地动态删除/添加一行数据：

----| _|| ____| -删除按钮-

----| _|| ____| -删除按钮-

----| _|| ____| -删除按钮-

----| _|| ____| -删除按钮-

----添加按钮- ---- 保存按钮 ----

但是，这里出现了一个问题：数据被排列在 html 数组中，以便返回到 JSP/sevlet 模型，就像 thie

  <input id="row[0]" .../>
  <input id="row[1]" .../>
  <input id="row[2]" .../>
                ......
  <input id="row[n]" .../>

因此，当用户删除一行时，尤其是在该部分的中间，那么数组序列肯定是混乱的，因为我只是使用基本的 jquery 命令来完成这项工作：

        if (confirm(message_confirm_delete)) {
            j(this).parent().remove();
        }

所以问题是：当用户删除其中一个数组元素时，重新排列所有输入字段数组的最佳方法是什么？

4

1 回答 1

1

如果我正确理解您的问题，您是说从中间删除一个后输入字段上的 id 不准确，对吗？如果是这种情况，这样的事情将在元素被删除后更新 id 属性。

<div>
    <input id="row[0]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[1]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[2]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[3]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[4]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>
<div>
    <input id="row[5]" type="text" class="removableInput"/><button class="remove">Remove</button>
</div>      

<script>
    $('button.remove').click(function() {
        $(this).parent('div').remove();

        $('input.removableInput').each(function(index) {
            $(this).attr('id', 'row[' + index + ']');
        });                                 
    });     
</script>
于 2013-03-18T21:17:22.123 回答