查找为单击的元素添加的行数

Question

当我想要“添加行”选项时，我有一个表，但我希望添加的行是同一行，即使用行跨度。现在我希望根据我点击添加行按钮的次数来增加行数。

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