こんばんは。家が豚汁臭いと言われたおはぎです。

誰か「家庭的だね(ﾊｧﾄ」と言ってfollow me。

・・・さて。本題です。

今日はテーブルの行にhoverスタイルを指定する方法についてです。

[JS]擬似クラス:hoverをtrに適用するjavascript

http://tenderfeel.xsrv.jp/javascript/59/

こちらのjsを利用すれば、こんな風に。

jsで＜tr＞にclass=”hover”を自動的に付加していってるという仕組みです。

上記のサイトのサンプルでは、id=”Table”と名前のついた＜table＞の＜tr＞にclassを付ける仕様になっており、

同じページ内にテーブルが複数ある場合には使えません。

ほんのちょっとだけ手を加えてみました。

window.onload = function () {
if (document.getElementsByTagName) {
var className = 'hover';
var rows = document.getElementsByTagName("tr");
for (var i = 0; i <rows.length; i++) {
if (rows[i].className) {
rows[i].BaseName = rows[i].className;
rows[i].onmouseover = function(){this.className = className;}
rows[i].onmouseout = function(){this.className = this.BaseName;}
}
}
}
}

はじめから無条件にページ内の<tr>タグを探してclassをつけるようにしました。

hover要素が不要なテーブルが同じページ内にあれば使えませんです。あしからず。