如何在jQuery的表格行鼠标悬停事件中获取tr的id？

我一眼就看出问题所在啦！你代码里获取ID的方式完全错了，还有不少冗余操作，才导致keyfromTable一直返回undefined。来看看怎么改：

问题根源 #

1. 你在鼠标悬停事件里用了$('tr').attr('id')——这会选中页面上所有<tr>元素，只返回第一个匹配元素的ID（如果第一个tr没有ID就会返回undefined），根本不是你当前悬停的那个tr！
2. eval(JSON.stringify(...))完全是多余的嵌套操作，既没必要还可能带来风险，直接获取ID就行。
3. 开头那行孤立的eval(JSON.stringify($('tr').attr('id')));也是没用的，直接删掉就行。

修复后的完整代码 #

// 删掉开头无意义的代码
$('table').on('mouseenter', 'tr', function() { 
    var tr = $(this); 
    setTimeout(function() { 
        if (!insidePopover) { 
            // 直接从当前悬停的tr获取ID
            var keyfromTable = tr.attr('id'); 
            console.log(keyfromTable); 

            $.getJSON( "http://localhost:8111/app/rest/builds/id:137/artifacts/content/additionalInfo.json", function(data) { 
                // 不需要转成字符串再解析，直接用返回的data对象
                var items = []; 
                for (var key in data) { 
                    var keyfromJson = key; // 原来的eval(key)完全多余，直接用key即可
                    // console.log(" OUTSIDE IF " + keyfromJson + " " + keyfromTable + " "); 
                    if (keyfromJson == keyfromTable) { 
                        // items.push( "<li id='" + key + "'>" + data[key]['Fi'] + "</li>" ); 
                        console.log("Inside IF " + keyfromJson + " " + keyfromTable + " "); 
                    } 
                } 
                // 给当前悬停的tr设置data-content，而非所有tr
                tr.attr('data-content', keyfromTable); 
                tr.popover('show'); 
                attachEvents(tr); 
            }); 
        } 
    }, 20); 
});

额外优化说明 #

• 循环里的eval(key)完全没必要，key本身就是JSON对象的键名字符串，直接使用即可。
• $.getJSON已经自动将返回的JSON字符串解析成了JavaScript对象，不需要再手动JSON.stringify和JSON.parse。
• 设置data-content时，要针对当前悬停的tr元素，而不是全局所有<tr>，避免把所有tr的属性都改成同一个值。

这样修改后，keyfromTable就能正确拿到当前悬停的ID，控制台也不会再输出undefined啦！

内容的提问来源于stack exchange，提问作者Sudheej