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

如果表定义为：

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

这样，当单击表中的单元格时，自定义属性

数据信息中的值是唯一的，确定单击了哪列的最有效方法是什么（即，为了获得数据信息值，例如“zipcode60606”）

编辑：单击的单元格左侧可能有不可见的列。
假设在单元格上检测到单击：

$('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');
        */
});




当然，您可以将事件处理程序放置在祖先元素上，例如
tr
，使用以下任一选项：

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


（请注意，通常，
event.target
不一定是跨浏览器兼容的，并且Internet Explorer可能需要（在jQuery之外）一个替代选项：
window.event.srcmelement
，但是jQuery规范化了事件，这样IE不仅可以读取/理解
事件
（不需要
window.event
），但它也可以访问标准化的
event.target
）

或


同样地，
单击
也可以绑定到
表
元素：

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


参考资料：









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

$('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');
        */
});




当然，您可以将事件处理程序放置在祖先元素上，例如
tr
，使用以下任一选项：

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


（请注意，通常，
event.target
不一定是跨浏览器兼容的，并且Internet Explorer可能需要（在jQuery之外）一个替代选项：
window.event.srcmelement
，但是jQuery规范化了事件，这样IE不仅可以读取/理解
事件
（不需要
window.event
），但它也可以访问标准化的
event.target
）

或


同样地，
单击
也可以绑定到
表
元素：

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


参考资料：









@Tim：不客气，我很高兴能帮上忙我还不确定问题是否出在我的表、jQuery或cellIndex的定义上，但如果单击的单元格左侧有不可见的列，代码就不会像预期的那样工作，尽管它可能会很好地工作。cellIndex是基于可见列的。我将编辑我的问题。然后在您提供的代码中显示一个演示准确地重新创建和再现您的实际问题。显示相关的JS和CSS。帮助我们帮助您。这实际上是我正在使用的UI库的一个设计问题——它将标题和正文拆分为单独的表，当标题列用display:none隐藏时，正文表甚至不包含相应的列。因此答案对于一个普通的HTML表来说是很好的。你有没有可能给出一个可能的加价示例？也许是？@Tim：不客气，我很高兴能帮上忙。=）我还不确定问题是否出在我的表、jQuery或cellIndex的定义上，但是如果单击的单元格左侧有不可见的列，这段代码并没有如人们所希望的那样工作，尽管它可能很好地发挥了应有的作用。cellIndex是基于可见列的。我将编辑我的问题，然后在你提供的代码中展示一个演示，它准确地再现了你的实际问题。显示相关的JS和CSS。帮助我们帮助您。这实际上是我正在使用的UI库的设计问题——它将标题和正文拆分为单独的表，当标题列用display:none隐藏时，正文表甚至不包含相应的列。所以，对于一个普通的HTML表来说，您的答案是好的。您是否有可能给出一个可能的标记示例？也许是一个？