Question

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

---- |的 _ | 的 | < / em>的____ | - 删除按钮 -

---- |的 _ | 的 | < / em>的____ | - 删除按钮 -

---- |的 _ | 的 | < / em>的____ | - 删除按钮 -

---- |的 _ | 的 | < / em>的____ | - 删除按钮 -

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

然而，这里出现了一个问题：数据被安排在html数组中以便返回JSP / sevlet模型，比如

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

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

Answer 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>

通过Dojo / jQuery / Javascript重组数组索引的最佳方法？

1 个答案: