Question

连续使用克隆功能后，如何为每行创建不同的ID

我使用添加更多按钮添加新行我喜欢为每行创建不同的ID

＆＃13;

function cloneRow() {

    var row = document.getElementById("clone");
    var table = document.getElementById("data");
    var selectIndex = 1;
    var clone = row.cloneNode(true);

    table.appendChild(clone);
    clone.setAttribute("style", "");

    var newSelectBox = document.createElement("select");
    newSelectBox.setAttribute("id", "select-" + selectIndex++);

    alert(newSelectBox.getAttribute("id"));

}

＆＃13;

        <div class="row">
            <div class="col-sm-12">
                <div class="col-sm-7"></div>
                <div class="col-sm-2">
                    <button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button>
                </div>
            </div>
        </div><br>

        <div class="row" id ="close">
            <div class="col-sm-4"></div>
            <div class='col-sm-4'>
                <Form id="NAME_VALUE" method="POST" >
                    <table  class="table-striped" >
                        <tbody id="data">
                            <tr id ="clone" style="display:none;">
                                <td>
                                    Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME"> 
                                </td>
                                <td>
                                    Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE"> 
                                </td>
                                <td>
                                    <button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
                                            return false;">
                                        <span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
                                </td>
                            </tr>
                             <tr>
                                <td>
                                    Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME"> 
                                </td>
                                <td>
                                    Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE"> 
                                </td>
                                <td>
                                    <button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
                                            return false;">
                                        <span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
                                </td>
                            </tr>
                        </tbody>
                    </table><br>
                    <button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login();
                        return false;"> save.</button>
                </Form>
            </div>
        </div>

＆＃13;

它只有select-0到每一个我喜欢选择-0，select-1，select-2取决于添加更多按钮点击

Answer 1

您可以在函数外设置这样的变量：

var  i = 0;

并在你的函数中更新它：

i = i + selectIndex

https://jsfiddle.net/gg1eyqgu/

在连续使用克隆函数之后，如何为每一行创建不同的id

1 个答案: