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

函数nearest()循环在祖先的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
});