查找單擊元素添加的行數

Question

我有一個表，當我想要一個'添加行'的選項，但我想要添加行同行，即使用rowspan。現在我想根據點擊添加行按鈕的次數來增加rowspan數字。

HTML：

<table class="table table-bordered datatabl dt-responsive"> 

     <thead> 
     <tr> 
     <th>&nbsp;</th> 
     <!-- <th>Billing Status</th> --> 
     <th>Skills</th> 
     <th>Experience (in Years)</th> 
     <th>Head Count</th> 
     <!-- <th>Billing State</th> --> 
     <th>Action</th> 
     </tr> 

     </thead> 
     <tbody> 


     <tr> 
     <td class=""><a href="javascript:void(0);">Feb</a> 
     <div class="popverdiv col-lg-4 col-md-4 col-xs-12 col-sm-12"> 
     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     <label>From</label> 
     <select class="form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
     </select> 

     </div> 

     <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
     <label>To</label> 
     <select class="form-control"> 
      <option>1</option> 
      <option>2</option> 
      <option>3</option> 
      <option>4</option> 
     </select> 

     </div> 

     <i class="glyphicon glyphicon-play"></i> 

     <div class="popverdiv-buttons"> 
     <a class="btn btn-primary setastraveldates">Set Date</a> 
     <a class="btn btn-default">Cancel</a> 
     </div> 
     </div> 
     </td> 

     <td><select class="form-control skil"><option>Select</option><option>HTML</option><option>JAVA</option></select></td> 
     <td><select class="form-control exp"><option>Select</option><option>1-3</option><option>3-5</option></select></td> 
     <td><input type="text" class="form-control headcount"/></td> 

     <td> 
    <select class="form-control"> 
     <option>Select</option> 
     <option>Copy to Next</option> 
     <option>Copy to all</option> 
    </select> 

    <a class="addrow">+</a> 



    </td> 

     </tr> 




     </tbody> 
     </table> 

JS：

$(".addrow").on("click",function(){ 
    $(this).parents("tr").after('<tr class="rowadded" role="row" class="odd"><td tabindex="0"><span class="">Jan</span></td><td><select class="form-control skil"><option>Select</option><option>HTML</option><option>JAVA</option></select></td><td><select class="form-control exp"><option>Select</option><option>1-3</option><option>3-5</option></select></td><td class="sorting_1"><input type="text" class="form-control headcount"></td><td><select class="form-control"><option>Select</option><option>Copy to Next</option><option>Copy to all</option></select></td></tr>'); 


    var i =0; 
    $(this).parents("tr").next(".rowadded").each(function(){ 
    i++; 

    }); 
    console.log(i); 
    }); 

，但我的代碼是不計算沒有。次'rowadded'類被添加到addrow按鈕所在的行旁邊，並重置下一個addrow按鈕的計數。請幫助。

Answer 1

試試這個fiddle

var i =0; 
$(".rowadded").each(function(){ 
i++; 

}); 
console.log(i); 

入住控制檯將顯示被添加的行的實際數量。

Answer 2

只需使用length代替each象下面這樣：

$(this).parents("tr").next(".rowadded").length; //returns 1 
$('.rowadded').length; //returns total count