javascript - 在jquery中增加行的序列号

Question

我正在编写代码来动态生成行。我遇到了错误生成行号的麻烦。问题是第一个可见的序列号的行被更改，其他行只是以正确的格式向下移动。请任何人告诉我应该怎么做才能正确获得序列号以下是我的代码。html代码

    var counter = 1;
    $(function () {

    $("#button1").click(function () {
        counter++;
        $('#dynamic').append($("#main-row").clone().attr("id", counter + 1));
        $("#serial").text(counter);

    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
              <div class="row " id="main-row">
               <div class="col-sm-1 serial  " id="serial">1</div>
                   <div class="col-sm-2  ">
                    <select class="container-fluid" name="select item"        id="selection">
                    
                    <option>Please select item</option>
                        <option value="30000" id="30000">Computer</option>
                        <option value="4000" id="4000">Mobile</option>
                        <option value="5000" id="5000">LCD</option>
                        <option value="1500" id="1500">Keyboard</option>
                        <option value="500" id="500">Mouse</option>
                    
                     </select>
            </div>
            <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
            <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice"  id="price1" value="" min="1" readonly/></div>  
            <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total"  readonly/></div>
            <button class="btn-primary col-sm-1 del ">Delete</button>
        </div>

    </div>
    <div class="btn-group-vertical offset-10">
        <button class="btn btn-primary" id="button1">Add Row</button>
        <button class="btn-warning" id="btnSubmit">Submit Order</button>
    </div>

Answer 1

您必须将 id 保留为唯一的属性值。当您克隆内容时，该内容中的所有 ids 都会被复制。因此，您不会有唯一的 ids。

我更改了您的代码并使用了 classes 而不是 ids

var counter = 1;
    $(function () {

    $("#button1").click(function () {
        counter++;
        $('#dynamic').append($(".main-row:first").clone().attr("id", "row_" + counter));
        $("#row_" + counter).find(".serial").text(counter);

    });
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container" id="dynamic">
              <div class="row main-row">
               <div class="col-sm-1 serial">1</div>
                   <div class="col-sm-2  ">
                    <select class="container-fluid" name="select item"        id="selection">
                    
                    <option>Please select item</option>
                        <option value="30000">Computer</option>
                        <option value="4000">Mobile</option>
                        <option value="5000">LCD</option>
                        <option value="1500">Keyboard</option>
                        <option value="500">Mouse</option>
                    
                     </select>
            </div>
            <div class="col-sm-2 "><input class="length quantity" type="number" min="1" name="quantity" id="quantity" required/></div>
            <div class="col-sm-2 "><input class="length price " type="number" name="unitPrice"  id="price1" value="" min="1" readonly/></div>  
            <div class="col-sm-2"><input class="length total" type="number" name="total" min="1" id="total"  readonly/></div>
            <button class="btn-primary col-sm-1 del ">Delete</button>
        </div>

    </div>
    <div class="btn-group-vertical offset-10">
        <button class="btn btn-primary" id="button1">Add Row</button>
        <button class="btn-warning" id="btnSubmit">Submit Order</button>
    </div>