クリックされた要素に追加された行の数を見つける

Question

「行を追加する」オプションが必要な場合はテーブルがありますが、行が追加されるのは同じ行、つまり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); 
    }); 

が、私のコードがノーカウントされません。 addrowボタンがある行の隣に 'rowadded'クラスが追加され、次のaddrowボタンのカウントがリセットされます。 Plsヘルプ。

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