2017-12-30 42 views
-1

iframe onclickで選択したテーブル行を強調表示したい。 親ソースにテーブルがあり、ハイライトがそこで動作しますが、同じ効果を持つiframeテーブルをターゲットにしたいと考えています。 ここに私の考えがありますが、それを達成するためのコードが問題です。 - div1にiframeをラップし、別のスリムなdiv2をdiv1内に配置してハイライト表示します。div1内でクリックすると、div2はマウス(選択した行)のY座標をとります。いずれかで達成することIframeハイライト選択したテーブル行

  • マウスクリックし、矢印キーを入力するキーまたはTabキー
    私は、選択された行は、IFRAME内強調表示を取得するにはどうすればよい。ここ

である私の現在のコード

Htmlの

<div> 
<table id="myTable" class="dataTable"> 
    <thead 
    <tr> 
     <th>First</th> 
     <th>Last</th> 
     <th>Address</th> 
     <th>City</th> 
     <th>State</th> 
     <th>Zip</th> 
    </tr> 
    </thead> 
    <tbody> 
    <tr class="odd-row"> 
     <td>James</td> 
     <td>Smith</td> 
     <td>222 Oak St</td> 
     <td>Madison</td> 
     <td>WI</td> 
     <td>54913</td> 
    </tr> 
    <tr class="even-row"> 
     <td>Michelle</td> 
     <td>Johnson</td> 
     <td>333 Maple Ave</td> 
     <td>Cedar Rapids</td> 
     <td>IA</td> 
     <td>52227</td> 
    </tr> 

    </tbody> 
    <iframe src="https://ethercalc.org/rowhighlight" style="border:6px solid grey;" height=400px width=90%></iframe> 
    </div> 
</table> 

jqueryの

$('tr').hover(function() { 
    $(this).addClass('hover'); 
}, function() { 
    $(this).removeClass('hover'); 
}).on('click', function() { 
    $('tr').not(this).removeClass('click-row') 
    $(this).toggleClass('click-row'); 
}); 

CSS

body { 
    font-family: verdana; 
} 
table { 
    border-collapse: collapse; 
} 
th { 
    text-align: left; 
} 
tr.even-row { 
    background-color: #EAEAFF; 
} 
tr.odd-row { 
    background-color: #FAFAFA; 
} 
tr.hover { 
    background-color: #FFFFCC; 
} 
tr.click-row { 
    background-color: green; 
} 

https://jsfiddle.net/otente/vwded5Lz/12/

+0

を加えて

.highlight{ //some coloring } 

のようなものがありますか? – charlietfl

+0

私はiframeのソースコードのコピーを持っています。これはローカルで実行することもできますし、nodejsアプリケーションですが、変更するには複雑すぎます。 – jugnu

+0

これはポイントではありません...ページと同じドメインのiframeですか? – charlietfl

答えて

-1

べきではない、あなただけのチャンホバーからハイライトまで?

$(this).addClass('highlight');

そして、あなたは、iframe内のソースコードを制御したり、それが別のドメインからのものでください

<tr class ="beautiful table".../> 

and 

$(.'beautiful table').hover 
+1

そして、CSSのハイライトクラスはどこにありますか? –

+0

編集中です:Pもう一度確認してください –

+0

私はあなたが質問を受けていないと思います。 OPはiframeをターゲットにしようとしています。 –

関連する問題