在一行中使用克隆功能后,如何为每行创建不同的ID

after using clone function in a row how can create different id for each row

本文关键字:ID 创建 功能 一行      更新时间:2023-09-26

在一行中使用克隆函数后,如何为每行创建不同的id

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

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

它的到来只有选择-0到我喜欢选择-0,选择-1,选择-2取决于单击的"添加更多"按钮

你可以在函数外设置这样的变量:

var  i = 0;

并在函数中更新它:

i = i + selectIndex

https://jsfiddle.net/gg1eyqgu/