Question

**** **澄清我做了[小提琴]（http://jsfiddle.net/sggPv/10/）以帮助澄清情况。

该脚本首先适用于两个表，但是当您点击滑块并将新表加载到div中时，它将停止工作。

我无法使用放大镜，因为文字非常小，我几乎不想看到文字。我只想让hover属性显示td的值。

****原始问题**

这是参考此previous question: 'how-can-i-enlarge-a-table-row-when-hovering-over-it

我的页面中有几个表格，我希望特定的表格显示值，而某些表格则不需要。这些表不是直接的html。表格显示在<div>标签中，并加载了滑块。

以下是我用来在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">

问题是它无法找到＆＃34; div中的td元素。我不确定如何做到这一点。我能帮忙吗？

Answer 1

因此，这最初适用于页面上的任何trs（当javascript运行时），但不适用于稍后添加的表格？这就是我从你的评论中理解的：“表格显示在标签中并加载了滑块”和“它仍然只适用于页面中的”常规“表格元素而不是<div id="tab">中加载的表格“

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

在这里小提琴：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();
    });

Answer 2

我已在您的旧问题的答案中更新了示例小提琴，所以it is available here。

代码如下所示，正如您所看到的，克隆脚本确实找到了附加的表。我怀疑你的问题是你的脚本加载顺序。只要您的滑块运行并完成运行，首先，您的脚本将检测该表。在大多数情况下，Javascript将按顺序运行，而不是并行运行，因此在您的html中首先出现的脚本将是第一个运行的脚本。

<强> HTML

<table>
<tr>
    <td>Row 1</td>
    <td>Row 1</td>
    <td>Row 1</td>
</tr>
<tr>
    <td>Row 2</td>
    <td>Row 2</td>
    <td>Row 2</td>
</tr>
<tr>
    <td>Row 3</td>
    <td>Row 3</td>
    <td>Row 3</td>
</tr>
</table>
<p> Load Table
<div id="myTab"></div>
</p>

<强> JS

<script>
// consider this your slider, it dynamically adds a table to the page.
$("#myTab").append("<table><tr><td>Row1</td><td>Row1</td><td>Row1</td></tr><tr><td>Row2</td><td>Row2</td><td>Row2</td></tr><tr><td>Row3</td><td>Row3</td><td>Row3</td></tr></table>");

var trEnlargedCssMap = {
    position: 'absolute',
    left: '50px',
    top: '50px',
    'font-size': '20px'
};

$('table tr').hover(

function() {
    $(this).closest("table").append(
    $(this).clone().addClass("cloned-element").css(trEnlargedCssMap).show());
}, function() {
    $(this).closest("table").find(".cloned-element").remove();
});
</script>

将鼠标悬停在桌面上时如何放大？ - 变化

CSS

代码

2 个答案: