Question

如果定义了一个表：

            <colgroup>
             <col style="width:100px;">
             <col style="width:100px;">
            </colgroup>
            <thead>
             <th class="foo" data-info="zipcode10023">
             <th class="foo" data-info="zipcode60602">
            </thead>

这样自定义属性data-info中的值是唯一，当单击表格中的单元格时，确定单击哪个列的最有效方法是什么（即为了获得数据信息值，例如“zipcode60606”）？

编辑：点击的单元格左侧可能有不可见的列。

Answer 1

假设在单元格上检测到点击：

$('td').click(function(){
    var col = $(this).index(),
        dataInfo = $('thead th').eq(col).attr('data-info');
        /* or:
        dataInfo = $('thead th').eq($(this).index()).attr('data-info');
           or:
        dataInfo = $('thead th').eq($(this).index()).data('info');
        */
});

JS Fiddle demo using: $('thead th').eq(col).attr('data-info')

JS Fiddle demo using: $('thead th').eq($(this).index()).attr('data-info')

JS Fiddle demo using: $('thead th').eq($(this).index()).data('info')

当然，您可以将事件处理程序放在祖先元素（例如tr）上，并使用：

$('tr').click(function (e) {
    var dataInfo = $('thead th').eq(e.target.cellIndex).data('info');
    console.log(dataInfo);
});

JS Fiddle demo

（注意，通常，event.target不一定是跨浏览器兼容的，并且Internet Explorer可能需要（在jQuery之外）另一种选择：window.event.srcElement，但jQuery规范化事件，以便IE不仅会读取/“理解”event（而不需要window.event），但它也可以访问规范化的event.target。）

或者，to use enough jQuery：

$('tr').on('click', 'td', function (e) {
    var dataInfo = $('thead th').eq($(this).index()).data('info');
    console.log(dataInfo);
});

JS Fiddle demo

同样，click也可以绑定到table元素：

$('table').click(function (e) {
    var dataInfo = $('thead th').eq(e.target.cellIndex).data('info');
    console.log(dataInfo);
});

JS Fiddle demo

参考文献：

HTML表jQuery：如果TH具有唯一的数据属性值，则确定在单击单元格时单击了哪一列

1 个答案: