3

私は次のようなシナリオを持っています

<table>
    <thead>
        <tr>
            <th id ="myid1">header1</th>
            <th id ="myid2">headre "2</th>
            <th id ="myid3">header3</th>
        </tr>
    </thead>
        <tr>
            <td>v1</td>
            <td>v2</td>
            <td>v3</td>
        </tr>
        <tr>
            <td>v10</td>
            <td>v11</td>
            <td>v12</td>        
        </tr>
        <tr>
            <td>v20</td>
            <td>v21</td>
            <td>v22</td>                    
        </tr>
        <tr>
            <td>v30</td>
            <td>v31</td>
            <td>v32</td>                    
        </tr>
</table>

何千もの行が存在する可能性があります。

その perticulat td が属する td の ID を取得する必要があります。

例えば ​​。3 行目の 3 番目の td をクリックすると、対応する th の ID を取得する必要があります。ここでは myid3 です (ここではハードコードされていますが、サーバー側からの値に基づいて設定されます)。

$('tbody td').live('click', function() {
    var idOfTh = ??
});
4

6 に答える 6

3 
$(function(){
    $('td').click(function() {
        alert($('table th').eq($(this).index()).attr('id'));
    });
});

JSfiddle の作業: http://jsfiddle.net/6etRb/

テーブル行が動的に追加されている場合にのみライブ委任を使用する必要があり、その場合は.on()他の人が説明したように使用する必要があります。

于 2012-08-02T14:22:17.927 に答える
1

メソッドを使用できますeq()。次のことを試してください。

 $('tbody td').live('click', function() {
     var ind = $(this).index()
     var idOfTh = $('thead th:eq('+ind+')').attr('id')
 });

代わりにlive()使用できる非推奨であることに注意してください。on()

于 2012-08-02T14:20:46.137 に答える
1

まず、この.live()機能は廃止されました。イベントを委任する場合は、.on()(jQuery 1.7+) またはのいずれかを使用します.delegate()。これ以降は を使用していると仮定しますが、 を使用する必要がある場合は.on()、わずかな構文変更 (最初の 2 つの引数を入れ替える) だけです.delegate()。

$(document).on('click', 'tbody td', function() {
    var tdIndex = $(this).index();
    // ^ gets the index of the clicked element relative to its siblings
    var thId = $('thead th:eq(' + tdIndex + ')')[0].id; 
    // ^ selects the th element in the same position in its row, then gets its id
});
于 2012-08-02T14:22:11.223 に答える
1

次の答えは間違っていますが、誰かを助けるかもしれないので編集を続けています

$('tbody td').live('click', function() {
    var tdIndex = $(this).parent('tr').indexOf($(this));
    var idOfTh = $(this).parent('table').find('tr').eq(tdIndex);
});

テストされていませんが、理論的には動作するはずです。

修正

以下の Felix Kling が指摘しているように、上記は正しくありません。インデックスを取得する正しい方法は、単に を呼び出すこと$(this).index()です。$(this)これにより、一致したセレクター内 (この場合は every 内<td>)の位置が検出されると想定していました<tbody>が、実際には、index()関数に引数を指定しないと、その兄弟に対する相対的なインデックスが検出されます。関連するドキュメントを指摘してくれた Felix に感謝します。

于 2012-08-02T14:19:55.383 に答える
0

ハンドラーは次のようになります。

function() {
    var self = this
    var th_num = 0;

    $(this).parent().children().each(function(num){
        if (this == self) {
            th_num = num;
            return false
        }
    });

    var th_id = $('thead th').eq(th_num).attr('id');
}
于 2012-08-02T14:26:48.160 に答える
0

これを行う方法は次のとおりです。

$('td').click(function() {
   var colNum = $(this).parent().children().index($(this)) + 1;
   alert($('#myid' + colNum).text());    
});​

jsfiddle: http://jsfiddle.net/p8SWW/4/

于 2012-08-02T14:26:11.140 に答える