2

如果一个表是这样定义的：

            <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”） ?

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

4

1 回答 1

2

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

$('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 演示使用：$('thead th').eq(col).attr('data-info') .

JS Fiddle 演示使用：$('thead th').eq($(this).index()).attr('data-info') .

JS Fiddle 演示使用：$('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 小提琴演示。

（请注意，通常情况下，event.target不一定是跨浏览器兼容的，Internet Explorer 可能需要（在 jQuery 之外）一个替代方案：window.event.srcElement，但是 jQuery 将事件标准化，因此 IE 不仅会读取/“理解” event（而不是requirewindow.event代替）但它也可以访问 normalized event.target。）

或者，要使用足够的 jQuery：

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

JS 小提琴演示。

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

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

JS 小提琴演示。

参考：

于 2013-01-31T23:41:36.980 回答