jQuery获取带有id的单击单元格的表头名称

Question

我有一张表，在该表中我有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>

Answer 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/

Answer 2

函数closest() 在DOM 树的祖先中循环，并且th 不是td 的父级，因此最接近不是正确的选项。如果您对多个元素具有相同的 id，首先使用类。其次使用index()找到td对应的th。为了具体将id分配给父表，以便脚本不会对页面上的其他tables / td进行操作。

Live Demo

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
});