Question

我有一个表允许用户添加行。当我加载页面时，它在show上有一行，隐藏了一个模板行。

我希望能够检查表中的行数，以防止用户删除所有行。

我的表定义为

<table id="tarrifItems">

  <th>Item</th>
  <th>Cost</th>

  <tbody>
    <tr>
      <td><input type="text" class="form-control" id="item[]" name="item[]"></td>
      <td>
        <div class="input-group">
          <span class="input-group-addon">£</span>
          <input type="text" class="form-control money" id="cost" name="cost[]" value="0.00"/>
        </div>
      </td>

      <td>
        <span href="" class="label label-success" onclick="addRow()">+</span>
        <span href="" class="label label-success" onclick="removeRow(this)">-</span>
      </td>

    </tr>
    <tr id="tarrifTemplate" style="display: none">
      <td><input type="text" class="form-control" id="item[]" name="item[]"></td>
      <td>
        <div class="input-group">
          <span class="input-group-addon">£</span>
          <input type="text" class="form-control money" id="cost" name="cost[]" value="0.00"/>
        </div>
      </td>

      <td>
        <span href="" class="label label-success" onclick="addRow()">+</span>
        <span href="" class="label label-success" onclick="removeRow(this)">-</span>
      </td>

    </tr>
  </tbody>


</table>

这给出了2行的计数，但是当我运行命令

时

alert($('#tarrifItems >tbody >tr').length)

我添加了一个显示此Fiddle的小提琴它给了我一个3的计数。任何人都可以建议我哪里出错了吗？

编辑：更新FIDDLE链接以纠正小提琴

Answer 1

th代码会创建一个新的tr代码。因此，计数将变为3.将th标记放在thead标记内。然后你会得到正确的计数。查看jsfiddle

Answer 2

在tbody产生额外行之前的额外行。看看：http://jsbin.com/kexuk/1/edit

计算tr还会包含display: none行，因为它们仍然存在于DOM中

建议：将th元素换成明确的thead元素，这样您的选择器就不会再抓住它们了

<thead>
  <tr>
   <th>Item</th>
   <th>Cost</th>
  </tr>
</thead>

Answer 3

在您的HTML代码中 - 代码中存在两个标题单元格th。所以第二个th在tbody之前产生一个额外的行。

因此，您应该将th标记放在thead标记内。

 <thead>
      <tr>
       <th>Item</th>
       <th>Cost</th>
     </tr>   
 </thead>

Demo

注意：根据the HTML4 specification，表格可能只有一个标题。

Answer 4

警告显示3因为它还计算一个隐藏的行和标题行。

$('#tarrifItems tbody tr:visible').size();

我在小提琴中更新了你的html和js

js fiddle

Answer 5

我认为最好的方法是为你添加的行设置一个特定的类。

var clone = $('#tarrifTemplate').clone();
clone.removeAttr('id');
clone.removeAttr( 'style' );
clone.addClass('addedRow') // add a class to the clone 
clone.appendTo('#tarrifItems');

并在需要时计算：

alert($('#tarrifItems .addedRow').length); // should give you the exact number of rows you added.

Answer 6

某些时间行计数似乎是错误的，因为标记不正确，即应该使用开始和结束标记正确地动态添加行时应小心

使用jquery计算Tables行会产生错误的答案

6 个答案: