Question

我正在处理的页面包含一个包含标题行，多行文本输入和总行的表。当用户在输入中输入数字时，将在总计行中计算每列的总和。当输入的change()事件被触发时，将运行此计算。

加载页面时，我希望能够在表格第一行的文本输入上触发change()事件。我在找出要使用的正确选择器时遇到了一些麻烦。

表结构的例子：

<table>
  <tr class="tblRow headerRow">
    <!-- header cells -->
  </tr>
  <tr class="altTblRow">
    <td class="tableCell">
      <input type="text" id="input1-1">
    </td>
    <td class="tableCell">
      <input type="text" id="input1-2">
    </td>
    <td class="tableCell">
      <input type="text" id="input1-3">
    </td>
  </tr>
  <tr class="tblRow">
    <td class="tableCell">
      <input type="text" id="input2-1">
    </td>
    <td class="tableCell">
      <input type="text" id="input2-2">
    </td>
    <td class="tableCell">
      <input type="text" id="input2-3">
    </td>
  </tr>
  <tr class="tblRow">
    <td class="tableCell">
      <input type="text" id="input3-1">
    </td>
    <td class="tableCell">
      <input type="text" id="input3-2">
    </td>
    <td class="tableCell">
      <input type="text" id="input3-3">
    </td>
  </tr>
  <tr class="altTblRow totalRow">
    <!-- total cells -->
  </tr>
</table>

我尝试使用了几个选择器，但未能得到我正在寻找的东西。

$('.tblRow:first input').change();
$('.tblRow input').first().change();
$('.tblRow input').parent('tr').find('input').change();

是否有一个选择器可用于第一个表格行中的输入，或者我是否需要获取第一个input并使用.parent()获取行？

（注意：代码示例中的ID已更改;否则我将使用'input[class*=input1]'）

Answer 1

我建议，虽然未经测试：

$('tr:not(".headerRow")').first().find('input').change();

JS Fiddle demo

此外，我建议重新编写HTML以利用语义（这将简化您的jQuery）：

<table>
  <thead>
    <tr class="tblRow headerRow">
      <!-- header cells -->
    </tr>
  </thead>
  <tfoot>
    <tr class="altTblRow totalRow">
      <!-- total cells -->
    </tr>
  </tfoot>
  <tbody>
    <tr class="altTblRow">
      <td class="tableCell">
        <input type="text" id="input1-1">
      </td>
      <td class="tableCell">
        <input type="text" id="input1-2">
      </td>
      <td class="tableCell">
        <input type="text" id="input1-3">
      </td>
    </tr>
    <!-- other rows -->
  </tbody>
</table>

这将允许您简单地使用：

$('tbody tr').first().find('input').change();

JS Fiddle demo

参考文献：

Answer 2

而不是使用表格行尝试使用While（参数）并尝试它而不是看看你得到的结果如果你清楚告诉我，如果没有告诉我你得到的确切错误

Answer 3

您可以选择除最后一行之外的所有行：

$('tr:not(:last-child) input')

请参阅here

或者如果你不想要标题：

$('tr:not(:last-child):not(:first-child) input')

在表格的第一行中选择输入

3 个答案: