Question

我有一个表格，当我想要一个＆＃39;添加行＆＃39;的选项，但我想要在同一行添加行，即使用rowspan。现在我想根据我点击添加行按钮FOR THAT ELEMENT的次数来增加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);
    });

但是我的代码不算数。时代＆＃39; rowadded＆＃39; class添加到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

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

2 个答案: