3

私はテーブルを持っており、そのテーブルには。の値がありますid="edit"。ここで、セルのいずれかをクリックしたときに、対応する列のヘッダー名を取得する必要があります。以前の質問に基づいて、これまでに私が持っているのは次のとおりです。

$('body').on('click', 'td#edit', function() {  
    var th = $('this').closest('th').eq($('th').val());
    alert(th);        // returns [object Object]
    .........................
}

これを手伝ってくれませんか。

HTML：

<table id="myTable" class="myTable">
<tbody>
    <tr>
        <th>Select</th>
        <th>JobNo</th>
        <th>Customer</th>
        <th>JobDate</th>
        <th>Warranty</th>
        <th>RepairStatus</th>
        <th>POP</th>
        <th>DOA</th>
        <th>Model</th>
        <th>SN</th>
    </tr>
    <tr>
        <td class="check">
            <input type="checkbox" value="12345">
        </td>
        <td class="edit">
            <b>12345</b>
        </td>
        <td class="edit">gdsgasdfasfasdfa</td>
        <td class="edit">2011-01-21</td>
        <td class="edit">TRUE</td>
        <td class="edit">RP</td>
        <td class="edit">FALSE</td>
        <td class="edit">0</td>
        <td class="edit">5152342</td>
        <td class="edit">66665464</td>
    </tr>
</tbody>

4

2 に答える 2

12

関数closest()はツリーの先祖でループしDOM、th は td の親ではないため、最も近いオプションは適切ではありません。複数の要素に同じ ID を使用している場合は、まずクラスを使用します。次に index() を使用して、対応する を見つけthますtd。スクリプトが他のページでid動作しないように、親テーブルに特定の割り当てを行うため。tables / td

ライブデモ

HTML

<table id="tbl1" border="1">
    <tr>
        <th>heading 1</th>
        <th>heading 2</th>
    </tr>
    <tr>
        <td class="edit">row 1, cell 1</td>
        <td class="edit">row 1, cell 2</td>
    </tr>
    <tr>
        <td class="edit">row 2, cell 1</td>
        <td class="edit">row 2, cell 2</td>
    </tr>
</table>

Javascript

$('#tbl1').on('click', '.edit', function () {
    var th = $('#tbl1 th').eq($(this).index());
    alert(th.text()); // returns text of respective header
});
于 2013-03-19T08:57:12.703 に答える
1

このマークアップについて

<table>
    <tr class="header">
        <th>Header One</th>
        <th>Header Two</th>
        <th>Header Three</th>
    </tr>
    <tr>
        <td class="edit">One</td>
        <td class="edit">Two</td>
        <td class="edit">Three</td>
    </tr>
    <tr>
        <td class="edit">One</td>
        <td class="edit">Two</td>
        <td class="edit">Three</td>
    </tr>
</table>

次の jQuery コードを使用できます。

$(".mytable").on('click', 'td.edit', function(e) {
    var index = $(this).index();
    var table = $(this).closest('table');
    console.log(table.find('.header th').eq(index).text());  // returns the header text  
});

ここでフィドル: http://jsfiddle.net/7qXm8/

于 2013-03-19T09:10:35.213 に答える