うーん・・・

iframeの内のTable(rowspan有り)に対し、動的にhoverで縦横ハイライトさせたい

解決済

質問者：a-ranoma
質問日時：2018/12/18 15:21
回答数：1件

参考URLをベースに、iframeの中の要素の操作で横列のハイライト、縦列にrowspanを除いたclassの連番割当はできるようになりました。
しかし列のみ適応されません。
$(this).attr('class');で既存クラスまで拾っていることが原因なのかと思い既存のクラスをリムーブしてみましたが特に変化なく…
何が原因でしょうか？どなたかお知恵を拝借させてください。

------------------

参考URL
http://www.finefinefine.jp/jquery/kiji696/

------------------

▼HTML（JS適応）

<iframe width="500" height="500" frameborder="0" id="shikaku-iframe" src="sample1.html"></iframe>

------------------
▼iframe内HTML／sample1.html（同ドメイン内）

<table class="crosstable">
<tbody>
<tr><td class="blank"></td>
<td>店舗</td>
<td style="">A店</td>
<td style="">B店</td>
</tr>
<tr>
<td rowspan="3">くだもの</td>
<td class="yellow">バナナ</td><td class="maru">○</td><td class="maru">○</td>
</tr>
<tr>
<td class="red">リンゴ</td><td class="maru">○</td><td class="maru">○</td>
</tr>
<tr>
<td class="red">いちご</td><td class="maru">○</td><td class="maru">○</td>
</tr>
<tr>
<td rowspan="1">野菜</td>
<td class="red">トマト</td><td class="slash">／</td><td class="slash">／</td>
</tr>
</tbody>
</table>

------------------
▼JS側

(function($) {
"use strict";

//rowspan属性のあるtdにclassを付ける
$('iframe').contents().find('td').each(function() {
if($(this).attr('rowspan') !== undefined) {
$(this).addClass("rowspan");
}
});
//既存クラスを削除してみる※変化なし
$('iframe').contents().find("td").each(function() {
$(this).removeClass("maru");
　$(this).removeClass("slash");
　$(this).removeClass("yellow");
　$(this).removeClass("red");
});
//クラスrowspanとblankを除きclassを連番付与
$('iframe').contents().find("tr").each(function () {
$(this).children().not('.rowspan').not('.blank').each(function (i) {
i = i+1;
$(this).addClass("item" + i);
});
});
//関数colorを作成
$.fn.color = function() {
return this.each(function() {
$(this).not('.rowspan').not('.blank').css('background-color', '#eee');
});
};
//行の背景色変更
$('iframe').contents().find("tr").mouseout(function() {
$(this).children().css('background-color', '');
});

//列の背景色変更
$('iframe').contents().find("td").each(function() {
var selector = '.'+ $(this).attr('class');
$(this).hover(function(){
$(selector).color();
$(this).siblings().color();
$(this).css('background-color', '#ccc');
},function(){
$(selector).css('background-color', '');
$(this).parent().css('background-color', '');
});
});
})(jQuery);

babu_babu_babooさんのCSSで背景色を付けるやり方を試行錯誤してみたところ、縦列が反映されないのはこちらの環境要因のことでした。tableにposition: absolute;を加え16進指定にすることで解決しました。
お知恵をいただき本当にありがとうございました。

補足日時：2018/12/19 10:18
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： babu_babu_baboo
回答日時：2018/12/18 20:25

さんこうにもなりませんね。

<!DOCTYPE html>
<meta charset="UTF-8">
<title>?</title>

<body>
<iframe width="500" height="300" frameborder="0" id="shikaku-iframe" src="sample1.html"></iframe>

<script>
window.addEventListener('DOMContentLoaded', () => {

let
doc = document.querySelector('iframe').contentWindow.document,
sheet = doc.head.appendChild (doc.createElement ('style')).sheet;

[`table{overflow:hidden}`,
`tr:not(:first-of-type):hover td:not([rowspan]){
background: rgba(0,0,0,0.2);
position: relative;
}`,
`tr:not(:first-of-type):hover td:not([rowspan]):hover::after {
content: "";
position: absolute;
background: rgba(0,0,0,0.2);
left: 0;
top: -5000px;
height: 10000px;
width: 100%;
z-index: -1;
}`].forEach (t => sheet.insertRule (t));
}

</script>