Javascript 将鼠标悬停在表格行上方时，如何放大表格行？-变异

****澄清** 我这样做是为了澄清情况

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

我不能使用放大镜，因为文字很小，我几乎不想看到文字。我只希望hover属性显示td的值

****原始问题**

这是指

我的页面中有几个表，我希望特定的表显示值，而有些表不显示值。这些表不是直接的html。这些表显示在

标记中，并使用滑块加载

下面是我用来在html中获取要加载的表的代码：

CSS 代码 我尝试将CSS更改为：

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

但它仍然只在页面中的

“general”

表元素上起作用，而不在页面中加载的表中起作用

<div id="tab">

---

问题是它无法在div中“找到”td元素。我不知道如何让它做到这一点。我能得到一个帮助吗？

所以这在最初页面上的任何

trs

上都有效（当javascript运行时），但在以后添加的表上不起作用？这就是我从您的评论中理解的：“表显示在标记中，并使用滑块加载”和“它仍然只在页面中的“常规”表元素上工作，而不在

中加载的表中工作。”

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

在这里拉小提琴：

---

我已经更新了你老问题答案中的提琴示例，所以

代码如下所示，正如您所看到的，克隆脚本确实可以找到附加的表。我怀疑你的问题在于你的脚本加载顺序。只要您的滑块运行并完成运行，首先，脚本就会检测到表。在大多数情况下，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>

一排
一排
一排
第2排
第2排
第2排
第3排
第3排
第3排
负荷表

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>

//将此视为滑块，它动态地向页面添加表。
$（“#myTab”）.append（“row1row1row1row2row2row3row3”）；
var TrenlageDcssMap={
位置：'绝对'，
左：“50px”，
顶部：'50px'，
“字体大小”：“20px”
};
$（'table tr'）。悬停(
函数（）{
$（this）.closest（“表”）.append(
$（this.clone（）.addClass（“克隆元素”）.css（trenlagedcssmap.show（））；
}，函数（）{
$（this）.closed（“table”）.find（“克隆元素”）.remove（）；
});

您是否尝试按CTRL键和+键使表变大？您运行JS的顺序是什么？滑块必须在加载自定义脚本之前加载。我认为，

#tab td.cloned元素

应该是正确的选择器（我不确定CSS是如何处理空白的，但这是一种我熟悉并知道有效的格式）。仅供参考，有一些JQuery插件可以对图像进行“缩放”效果，这可能是一个比较的好地方。看看你的另一个问题——你已经知道现有的图像插件了：）你为什么不能只使用css呢

tr:hover{font size:20px；}

（）或者，您可以只使用AnythingZoomer插件。。。显示如何使用两个表（小和大）来产生缩放效果。如果您查看我发布的小提琴，它不适用于我的应用程序。起初它可以工作，但当另一张桌子被加载到div中时，它就停止工作了。@crippy在你拿小提琴之前，我写下了我的答案。我一直在玩：）我知道你已经接受了一个答案，但另一个解决方案（我在你的小提琴上测试过）是将你的

$（'td'）。悬停

等放入一个函数

function thover（）

，然后在

function instrumentV2Slider

中调用该函数，你也可以在其中调用

updateTable（）

等。您还可以调用

$（document）.load（）中的函数，使其在页面第一次加载时启动。我已经测试过了，效果很好。原因正如CJSpug所描述的那样——当页面改变时，监听器不会启动。你能和我分享一下你做的小提琴吗？这样我就可以看到替代方法了？我一直在寻找不同的做事方式。。。谢谢成功了。谢谢你的信息。
$('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();
    });

<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>

<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>