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

函数closest()在DOM树的祖先上循环，并且它不是td的父级，因此最接近的是不正确的选项。首先，如果您对多个元素具有相同的id，请使用类。其次使用index（）查找th的相应td。用于特定地将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
});

Answer 2

对于此标记

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

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

2 个答案: