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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

您可以使用css计数器

检查以下代码段

＆＃13;

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

＆＃13;

.container {
  counter-reset: row;
  /* Set the row counter to 0 */
}

.container .row::before {
  counter-increment: row;
  /* Increment the row counter*/
  content: counter(row) ": ";
  /* Display the row */
}

＆＃13;

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

＆＃13;

希望有所帮助

Answer 3

我认为你应该在附加到容器的行的基础上增加计数器。使用这个逻辑后你的代码将如下所示。

$("#button1").click(function () {
        var counter = $(".container>.row").length;
        var next_id = counter + 1;
        $('#dynamic').append($("#main-row").clone().attr("id", next_id));
        $("#"+next_id).find(".serial").text(next_id);
});

在jquery中增加行的序列号

3 个答案: