テーブルにマウスオーバーして図をだす

javascript jquery

テーブルにマウスオーバーして図をだす
上の階層の行の行番号を検索
その行の下にぶち抜きの行をつくる
ぶちぬくに図を挿入
マウスアウトしたらそれらの行を消す．

ソースへの要求

<div id="cor_table"></div>
の間にtableをいれる．

tableの各行には<a class="fig" href="xxx.png">
みたいな感じにリンクとクラス付の要素をいれる．


新しいより一般的なバージョン

   $("#cor_table").on({

                        'mouseenter': function(){

                                link1=$(this).attr("href");
                                row_id=$(this).attr("name");
                                // row_no=$(this).parent().attr("id");
                                //alert("test")

                             //alert($(this).closest("tr").html());

                             //($(this).parent.append("test"));
                             //$(this).parents.after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');

                             $(this).closest("tr").after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');
                             $("#tmp_fig").append('<div id="tmp1"></div>');
                             $("#tmp1").append('<img src="'+link1+'" width="100%" height="100%" />');

                        },
                        'mouseleave': function(){

                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();

                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                //alert("test");

                                //alert("test");

                               // $("#fig1234tmp").remove();
                        }

        },".fig")

古いバージョン

 function test1234(){
                $(".fig").hover(

                        function(){

                                link1=$(this).attr("href");
                                row_id=$(this).attr("name");
                            row_no=$(this).parent().parent().parent().attr("id");

                             $("tr#"+row_no).after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');
                             $("#tmp_fig").append('<div id="tmp1"></div>');
                             $("#tmp1").append('<img src="'+link1+'" width="100%" height="100%" />');

                        },
                        function(){

                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();

                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                //alert("test");

                                //alert("test");

                               // $("#fig1234tmp").remove();
                        }

                 }

ページ全体の例：
CGIを利用して，target_idの番号に関するテーブルを出力．
xxxyyytest
みたいな．

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>jQueryのテスト</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script>
$(function(){

        //$("#cor_table").append("test")

        var target_id=(location.search).split("=")[1]

        alert(target_id)
         $("#cor_table").on({

                        'mouseenter': function(){

                                link1=$(this).attr("href");
                                row_id=$(this).attr("name");
                                // row_no=$(this).parent().attr("id");
                                //alert("test")

                             //alert($(this).closest("tr").html());

                             //($(this).parent.append("test"));
                             //$(this).parents.after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');

                             $(this).closest("tr").after('<tr id="tmp_fig0"><td id="tmp_fig" colspan="8" ><td></tr>');
                             $("#tmp_fig").append('<div id="tmp1"></div>');
                             $("#tmp1").append('<img src="'+link1+'" width="100%" height="100%" />');

                        },
                        'mouseleave': function(){

                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();
                                $("#tmp1").remove();

                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                $("#tmp_fig0").remove();
                                //alert("test");

                                //alert("test");

                               // $("#fig1234tmp").remove();
                        }

        },".fig")

        $.ajax({
                type: "GET",
                url: "http://192.168.0.244/cgi-bin/syoku_list_get/calc_col.rb?target_id="+target_id,

                success: function(msg){

                        $("#cor_table").html(msg);

                }

        })




})
</script>

</head>
<body>
時間変動が似ている関連ワードを抽出(ベータ版) <hr>
関連ワード表<br><br>
<div id="cor_table">計算中　2分ほど待ちください…</div>

</body>
</html>