Javascript 使用jquery计算表行时产生了错误的答案

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

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

我的表定义为

<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>

我已经包括了一把小提琴显示这一点 它让我数到3。有人能告诉我哪里出了问题吗

---

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

标签创建新的

tr

标签。所以计数是3。将

th

标记放在

thead

标记内。然后你会得到正确的计数。检查标签，该

th

标签创建一个新的

tr

标签。所以计数是3。将

th

标记放在

thead

标记内。然后你会得到正确的计数。检查显示3的警报，因为它还计算一个隐藏行和标题行

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

我会用fiddle更新你的html和js

---

警报显示3，因为它还计算一个隐藏行和标题行

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

我会用fiddle更新你的html和js

---

车身前面的额外th产生额外的一行。请查看：

计数

tr

还将包括显示为

的行：none

，因为它们仍然存在于DOM中

建议：将

th

元素包装在显式

thead

元素中，这样选择器就不会再抓取它们了

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

项目
成本

正文前的额外th生成额外的行。请查看：

计数

tr

还将包括显示为

的行：none

，因为它们仍然存在于DOM中

建议：将

th

元素包装在显式

thead

元素中，这样选择器就不会再抓取它们了

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

项目
成本

在HTML代码中-代码中存在两个标题单元格

th

。因此，第二个

th

在tbody前面产生一个额外的行

因此，您应该将

th

标记放在

thead

标记内

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

项目
成本

---

注意：在HTML代码中，一个表可能只有一个标题。

-代码中有两个标题单元格th。因此，第二个

th

在tbody前面产生一个额外的行

因此，您应该将

th

标记放在

thead

标记内

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

项目
成本

---

注意：一个表可能只有一个标题。

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

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.

---

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

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.

---

有些时候行计数似乎是错误的，因为 不正确的标签，即开始和结束标签应

---

在动态添加行时，应注意正确

有时行计数似乎是错误的，因为 不正确的标签，即开始和结束标签应

---

动态添加行时应注意正确

第页中的表是否有重复的ID？还应放置正确的fiddle链接。在

tbody

之前的额外

th

会产生额外的行。看看：太好了，谢谢你。那么，我是调整我的计数以考虑标题，还是有办法只计算实际行数？小提琴根本不起作用。它调用jQuery，但没有加载jQuery框架。页面中的表是否有重复的ID？同时放置正确的fiddle链接。在

tbody

之前的额外

th

会产生额外的一行。看看：太好了，谢谢你。那么，我是调整我的计数以考虑标题，还是有办法只计算实际行数？小提琴根本不起作用。它调用jQuery，但没有加载jQuery框架。不应该

th

在

tr

内吗？我在

tr

内使用了

thead

，这导致了不正确的行计数。现在，它是固定的。

th

不应该在

tr

内吗？我在

tr

内使用了

thead

，这导致了不正确的行计数。现在，它是固定的。两个

th

将只生成一个标题。两个

th

将只生成一个标题