2

テーブルが次のように定義されている場合:

            <colgroup>
             <col style="width:100px;">
             <col style="width:100px;">
            </colgroup>
            <thead>
             <th class="foo" data-info="zipcode10023">
             <th class="foo" data-info="zipcode60602">
            </thead>

カスタム属性の値data-infoが一意であるように、テーブル内のセルがクリックされたときに、クリックされた列を特定する最も効率的な方法は何ですか (つまり、「zipcode60606」などのデータ情報の値を取得するため) ?

編集: クリックしたセルの左側に非表示の列がある場合があります。

4

1 に答える 1

2

セルでクリックが検出されたと仮定します。

$('td').click(function(){
    var col = $(this).index(),
        dataInfo = $('thead th').eq(col).attr('data-info');
        /* or:
        dataInfo = $('thead th').eq($(this).index()).attr('data-info');
           or:
        dataInfo = $('thead th').eq($(this).index()).data('info');
        */
});

以下を使用した JS Fiddle デモ:$('thead th').eq(col).attr('data-info') .

以下を使用した JS Fiddle デモ:$('thead th').eq($(this).index()).attr('data-info') .

以下を使用した JS Fiddle デモ:$('thead th').eq($(this).index()).data('info') .

trもちろん、次のいずれかを使用して、イベント ハンドラを などの先祖要素に配置することもできます。

$('tr').click(function (e) {
    var dataInfo = $('thead th').eq(e.target.cellIndex).data('info');
    console.log(dataInfo);
});

JS フィドルのデモ。

(通常、event.target必ずしもクロスブラウザー互換であるとは限らず、Internet Explorer は (jQuery の外部で) 代替手段を必要とする場合があることに注意してください:window.event.srcElementただし、jQuery はイベントを正規化するため、IE はevent(そして代わりにrequire window.event) を使用しますが、正規化された にもアクセスできますevent.target。)

または、十分な jQuery を使用するには:

$('tr').on('click', 'td', function (e) {
    var dataInfo = $('thead th').eq($(this).index()).data('info');
    console.log(dataInfo);
});

JS フィドルのデモ。

同様に、 を要素clickにバインドすることもできます。table

$('table').click(function (e) {
    var dataInfo = $('thead th').eq(e.target.cellIndex).data('info');
    console.log(dataInfo);
});

JS フィドルのデモ。

参考文献:

于 2013-01-31T23:41:36.980 に答える