2

我正在处理的页面包含一个带有标题行、几行文本输入和一个总行的表格。当用户在输入中输入数字时，将在总计行中计算每列的总和。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]'）

4

3 回答 3

2

我建议，虽然未经测试：

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

JS 小提琴演示。

不过，此外，我建议您重新编写 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 小提琴演示。

参考：

于 2013-05-24T21:09:19.837 回答
2

不使用表格行尝试 While(parameter) 并尝试它，然后看看你得到了什么结果，如果你清楚告诉我，如果没有告诉我你得到的确切错误

于 2013-05-24T21:11:21.333 回答
0

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

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

看这里

或者，如果您不想要标头：

$('tr:not(:last-child):not(:first-child) input')
于 2013-05-24T21:10:41.520 回答