将鼠标悬停在表格行上时如何放大表格行？答案

【问题标题】：How can I enlarge a table row when hovering over it?将鼠标悬停在表格行上时如何放大表格行？
【发布时间】：2017-07-29 18:38:04
【问题描述】：

我正在尝试构建一个类似于鼠标悬停放大图像的 jQuery 插件 - 但在表格行上：

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

$('table tr').hover(
    function()
    {
        $(this).clone().css(trEnlargedCssMap).show();
    },
    function()
    {
        $(this).hide();
    })

它还没有接近工作，有什么提示吗？

【问题讨论】：

标签： jquery jquery-plugins html-table

【解决方案1】：

您必须将其附加到 DOM/表（无论您想要什么）。我将它附加到现有表中。当您悬停时，您还应该.remove() 任何克隆的元素，而不是隐藏它们。请根据您的应用程序的需要更改属性。

jsFiddle

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();
})



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

【讨论】：

如果页面中有多个表格，我不会使用 $("table").append(...) 。它将附加到所有表。对当前表使用 appendTo 可能会更好。
同意 100%！我已经更新了答案以引用悬停的特定表。感谢您的反馈！
我的 td 太短，以防它们在原始行中为空。我试图在原始行中设置 td min-width: 20px; 并希望它被翻译成克隆行。但没有运气......有什么建议吗？
min-width 为我工作。检查此jsFiddle。这就是你要找的吗？

【解决方案2】：

您需要在某个地方append() 它。在这里你只是克隆它，什么都不做......

所以$(this).clone().css(trEnlargedCssMap).appendTo('#myZoomedRow');

【讨论】：

【解决方案3】：

您必须将该克隆元素附加到 DOM，并隐藏（或删除它以防止冲突）从您克隆的实际行中插入的“新”元素。

var trEnlargedCssMap = {
        position: 'absolute',
        left: '50px',
        top: '50px',
        'font-size': '14px'
    }
$('table tr').hover(
                    function(){
                        $(this).clone().css(trEnlargedCssMap).appendTo("#newRow").show();
                    },
                    function(){
                         $("#newRow").hide();
                    }
                    )

【讨论】：