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/
を加えて
のようなものがありますか? – charlietfl
私はiframeのソースコードのコピーを持っています。これはローカルで実行することもできますし、nodejsアプリケーションですが、変更するには複雑すぎます。 – jugnu
これはポイントではありません...ページと同じドメインのiframeですか? – charlietfl