15

次のようなテーブルの特定の行の直後に、文字列myoutputを追加しようとしています。

<table>
<tr data-my_id='1'> <td> content </td> </tr>
<tr data-my_id='2' data-my_other_id='1' > <td> content </td> </tr>
<tr data-my_id='3' data-my_other_id='2' > <td> content </td> </tr>
</table>

したがって、trの後に出力文字列を追加したいとしますdata-my_other_id='2' （私のコードでは、my_other_id = 2すでに）

私はこれをやってそれを達成しようとしています：

var want = $("tr").find("[data-my_other_id='" + my_other_id + "']").index();

インデックスを見つけたら、出力strhingをこの行に追加します...

$(want).insertAfter(...?);

また...私はするたびに気づきました

alert( want = $("tr").find("[data-my_other_id='" + my_other_id + "']").length)

私は0を取得します...

私の質問が十分に明確でない場合は、私がよりよく説明できるように助けてください、そして私に知らせてください。

4

5 に答える 5

21

追加ではなくコンテンツを更新したいと思いますが、実際には何も変わりません。find（）をそのように使用したくないと思います。次のようなものを試してください：

var $row = $('tr[data-my_other_id="' + id + '"]');
// should be the index of the tr in the <table>
// this may not be a good idea though - what if you add a header row later?
var index = row.index() + 1; // if you want 1-based indices
$row.find("td").text("I am row #" + index);
于 2013-01-04T23:27:09.507 に答える
2

data属性はtr自体にあるため、findメソッドを使用する必要はありません。また、インデックスの使用は機能しません。代わりに次を試してください。

$("tr[data-my_other_id='" + my_other_id + "']").insertAfter(...?);
于 2013-01-04T23:19:01.337 に答える
2

これは、findが兄弟を検索せず、子のみを検索するためです。検索をテーブルに添付してみてください。

html：

<table>
<tr data-my_id='1'> <td> content </td> </tr>
<tr data-my_id='2' data-my_other_id='1' > <td> content </td> </tr>
<tr data-my_id='3' data-my_other_id='2' > <td> content </td> </tr>
</table>​

js：

var my_other_id = 2;
alert( $("table").find("[data-my_other_id='" + my_other_id + "']").length);​

デモ： http： //jsfiddle.net/gDb3A/

于 2013-01-04T23:18:31.657 に答える
1

find子孫を探します。ATRはそれ自体の子孫になることはできません。

使ってみてくださいfilter()

$("tr").filter("[data-my_other_id='" + my_other_id + "']").index();
于 2013-01-04T23:19:12.503 に答える
0

特定のテーブルで検索して高速化するため、この方法を使用できます。

Js：

$('any-button').click(function(){
    var id = 23;
    var $row = $('.your-class tbody tr[data-id="' + id + '"]');
    $row.remove();
});

HTML

<table class="table table-striped your-class">
        <thead>
        <tr>...<tr/>
       </thead>
      <tbody>
        <tr data-id="23">Some text</tr>
       <tr data-id="43">Some text</tr>
       <tr data-id="43">Some text</tr>
     </tbody>
</table>
于 2017-04-25T09:56:45.077 に答える