在jquery中增加行的序号no

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>

Answer 2

您可以使用CSS计数器这个

检查下面的代码片段

var counter = 1; 
 
$(function() { 
 

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

 

 
    }); 
 
});

.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 */ 
 
}

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

希望它有帮助

Answer 3

我想你应该使用这个逻辑你的代码会附加到container.After行的基础上，计数器加一如下所示。

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