2

次のようなテーブルがあります。

<table>
  <tbody>
    <tr>
      <td>
        <input type="text" class="identifier" />
      </td>
      <td class="name">
        Some value
        <input type="hidden" value="Some value" class="hiddenName" />
      </td>
    </tr>

    <tr>
      <td>
        <input type="text" class="identifier" />
      </td>
      <td class="name">
        Some value 2 
        <input type="hidden" value="Some value 2" class="hiddenName" />
      </td>
    </tr>
  </tbody>
</table>

私がやりたいことは、クラス識別子を持つ入力の値が変更されたときに、同じ行のクラス「名前」の列のテキストを「値の設定」に変更し、hiddenName 値も「設定値」に変更

たとえば、クラス識別子を持つ 2 番目の行の入力が変更された場合、マークアップを次のように変更する必要があります。

<table>
  <tbody>
    <tr>
      <td>
        <input type="text" class="identifier" />
      </td>
      <td class="name">
        Some value
        <input type="hidden value="Some value" class="hiddenName" />
      </td>
    </tr>

    <tr>
      <td>
        <input type="text" class="identifier" />
      </td>
      <td class="name">
        Set value 
        <input type="hidden value="Set value" class="hiddenName" />
      </td>
    </tr>
  </tbody>
</table>

だから私が思いついたjqueryは次のとおりです。

$('.identifier').change(function () {

    var row = $(this).parent("tr");
    row.find('.hiddenName').val("Set value");
     row.find('.name').text("Set value");
});

ただし、これはまったく機能していません。

私が間違っていることと修正方法を誰かが知っていますか?

4

5 に答える 5

4 
$('.identifier').change(function () {
  var $td = $(this).parent().next(".name");
  $td.text("SetValue");
  $td.find(".hiddenName").val("SetValue");
});

フィドル。

EDIT：あなたの最後の更新では、問題はparentDOMツリーを1レベル上に移動するだけで、 からまでinput、2つのレベルがあることです。@undefined によって提案されているように代わりに使用します。これは、一致が見つかるまで移動し続けます。上記のアプローチの方が高速ですが、動作するはずです。tdtrclosest

$('.identifier').change(function () {
    var row = $(this).closest("tr");
    row.find('.hiddenName').val("Set value");
    row.find('.name').text("Set value");
});

フィドル。

于 2012-08-20T02:02:19.263 に答える
1

closest()の代わりに メソッドを使用できますparentが、コードに構文エラーがあることにも注意してください。

$('.identifier').change(function () {
   var row = $(this).closest("tr");
   row.find('.hiddenName').val("Set value");
   row.find('.name').text("Set value");
   // }  this bracket should be removed
});
于 2012-08-20T02:03:15.033 に答える
1

コードに二重引用符がないため、エラーが発生します..

タイプ="隠し値="

たぶんこれが問題でしたか？

于 2012-08-20T02:26:20.427 に答える
1

これを試すことができます：作業デモ http://jsfiddle.net/f6WKF/

var row = $(this).parent().parent("tr");

また、引用符にも構文エラーがあります。

それがあなたのニーズに合うことを願っています!:)

コード

$('.identifier').keyup(function() {
    var row = $(this).parent().parent("tr");
    row.find('.hiddenName').val("Set value");
    row.find('.name').text("Set value");
});​
于 2012-08-20T02:08:20.700 に答える
1

parents()の代わりに使用することもできますparent():

​$('.identifier').change(function () {   
        var row = $(this).parents("tr");
        row.find('.name').text("Set value");
        row.find('.hiddenName').val("Set value");
 })
于 2012-08-20T02:22:34.700 に答える