javascript - 使用 jquery 计算表行产生了错误的答案

Question

我有一个表，我允许用户向其中添加行。当我加载页面时，它有一行显示和隐藏的模板行。

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

我的表定义为

<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 的 fiddle 它给了我 3 的计数。任何人都可以建议我哪里出错了吗？

已编辑:更新了 FIDDLE 链接以更正 fiddle

Answer 1

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

并且计算 tr 也会包含带有 display: none 的行，因为它们仍然存在于 DOM 中

建议:将第 th 元素包裹在显式 thead 元素中，这样您的选择器就不会再抓取它们

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