javascript - 将鼠标悬停在表行上时如何放大表行？ - 变化

Question

****澄清**我做了这个 [Fiddle] ( http://jsfiddle.net/sggPv/10/ ) 来帮助澄清情况。

该脚本起初适用于两个表格，但随后当您点击 slider 并将新表格加载到 div 中时，它停止工作。

我不能使用放大镜，因为文字非常小，我根本不想看文字。我只希望悬停属性显示 td 的值。

****原始问题**

这是引用这个 previous question: 'how-can-i-enlarge-a-table-row-when-hovering-over-it

我的页面中有多个表格，我希望特定表格显示值，而有些表格不显示。这些表不是直接的 html。这些表出现在 <div> 中标签并加载了 slider 。

这是我用来在 html 本身中加载一个表的代码:

CSS

td.cloned-element {
  min-width:50px;
}

代码

var tdEnlargedCssMap = {
  position: 'fixed',
  left: '800px',
  top: '250px',
  'font-size': '30px'
}

$('td').hover(

function() {
   $(this).closest("table").append(
   $(this).clone().addClass("cloned-element").css(tdEnlargedCssMap).show())
   }, function() {
     $(this).closest("table").find(".cloned-element").remove();
})

我尝试将 CSS 更改为:

#tab td.cloned-element {
    min-width:50px;   
}

但它仍然只适用于 "general"表格元素在页面中而不是在加载的表格中

<div id="tab">

问题是它无法在 div 中“找到”td 元素。我不确定如何让它做到这一点。我可以得到帮助吗？

Answer 1

所以这适用于任何 trs最初在页面上(当 javascript 运行时)，但不在稍后添加的表上？这就是我从您的评论中了解到的:“表格出现在标签中并加载了 slider ”和“它仍然仅适用于页面中的“常规”表格元素，而不适用于 <div id="tab"> 中加载的表格“

如果是这样，可能是因为监听器仅在加载时附加到页面上的元素。相反，将监听器附加到主体，或者最好是包含所有表格的包装器元素。

在这里 fiddle :http://jsfiddle.net/uQEUz/9/

$('body')
    .on('mouseenter', 'table tr', function() {
        $(this).closest("table").append(
        $(this).clone().addClass("cloned-element").css(trEnlargedCssMap).show());
    })
    .on('mouseleave', 'table tr', function(){
        $(this).closest("table").find(".cloned-element").remove();
    });