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

テーブル行を使用する代わりに、While(パラメーター) を試して試してみて、明確になったらどのような結果が得られるかを確認してください。得られている正確なエラーが表示されない場合は教えてください

于 2013-05-24T21:11:21.333 に答える
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 に答える
0

最後の行を除くすべての行を選択できます。

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

こちらをご覧ください

または、どちらのヘッダーも必要ない場合:

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