1

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

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

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

它不接近工作，任何提示？

4

3 回答 3

2

您必须将其附加到 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>​
于 2012-10-25T16:08:18.397 回答
0

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

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

于 2012-10-25T16:06:27.803 回答
0

您必须将该克隆元素附加到 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();
                    }
                    )
于 2012-10-25T16:11:16.940 回答