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