Question

我正在开发一个项目，我必须动态渲染行。但是用户也可以删除该行，看看我当前的工作

JQuery

var counter = 1;
function addrow() {
    var textbox = "<div id='rows" + counter + "'> </br><label>  Option :  </label><input type='text' name='Answers[" + counter + "]' class='ahsan required' /><a href="">Remove</a></div>";
    var form = $("#form").valid();
    if (form) {
        $("#TextBoxesGroup").append(textbox);
        counter++;
    }
    else {
        return false;
    }
}

HTML

 <div id="TextBoxesGroup" style="margin-left: 100px;">
    <div id="rows0">
        </br><label>
            Option :
        </label>
        <input type='text' name='Answers[0]' class='ahsan required' /><a href="">Remove</a>
     </div>
</div>
<div>
    <input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' /></div>

现在，如果我有10行，那么名称将是答案[0,1,2,3,4,5]。我想在我点击删除锚点时删除输入，并重新输入所有文本框的名称例如，如果我删除第四个索引处的输入，那么所有文本框将自动重新排列。我可以做吗请帮助我并提前致谢

Answer 1

你可以不用反击就行。这样，您的答案将始终在数组中从零开始排序。

这是一个看似合理的解决方案：

$(function(){
    $("#form").validate();
     this.addrow = function() {
        if ($("#form").valid()) {
            var textbox = "<div> </br><label>  Option :  </label><input type='text' name='Answers["+$("#TextBoxesGroup div").length+"]' class='ahsan required' /><a class='remove-me' href='#'>Remove</a></div>";
            $("#TextBoxesGroup").append(textbox);
            $('.remove-me').click(function(){
                $(this).parent().remove();
                return false;
            });
        }
        else {
            return false;
        }
    }
    this.addrow();
});

并且html很简单：

<form id="form">
<div id="TextBoxesGroup" style="margin-left: 100px;"></div>
<div>
    <input type="button" value="Add another row" onclick="addrow();" class="qa-adbtn" id='addButton' />
</div>
</form>

我如何重新排列命名为数组索引的文本框

1 个答案: