jquery - カーソルを合わせたときに表の行を拡大するにはどうすればよいですか?

Question

マウスオーバーで拡大画像に似たjQueryプラグインを構築しようとしていますが、テーブル行では:

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

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

作業にはほど遠いですが、ヒントはありますか？

Answer 1

DOM/テーブルに追加する必要があります（必要な場所に）。既存のテーブルに追加しました。また.remove()、複製された要素は、非表示にするのではなく、ホバーアウトする必要があります。アプリケーションの必要に応じて属性を変更してください。

jsフィドル

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

Answer 2

そのクローン要素を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();
                    }
                    )

Answer 3

あなたはappend()どこかにそれをする必要があります。ここでは、それを複製するだけで何もしません...

そう$(this).clone().css(trEnlargedCssMap).appendTo('#myZoomedRow');