getting table heading name using jquery

Question

How can I get the column heading name of the corresponding cell clicked using jquery plugin: bootstrap-table

$("#voterTable").on('click-cell.bs.table', function(field, value, row, element) {
      console.log(field);
   });

I have tried something like this, but it gives an object and I couldn't find the column heading property. I have also tried finding column heading in element and value argument but couldn't find the column heading property.

Answer 1

使用函数closest（）。然后使用index（）找到对应的td。同时为父表分配ID

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

Java脚本

$('#tbl1').on('click', '.edit', function () {
    var th = $('#tbl1 th').eq($(this).index());
    alert(th.text()); // returns text of respective header
});