こんばんは。家が豚汁臭いと言われたおはぎです。
誰か「家庭的だね(ﾊｧﾄ」と言ってfollow me。
・・・さて。本題です。
今日はテーブルの行にhoverスタイルを指定する方法についてです。
[JS]擬似クラス:hoverをtrに適用するjavascript
こちらのjsを利用すれば、こんな風に。
jsで＜tr＞にclass=”hover”を自動的に付加していってるという仕組みです。
上記のサイトのサンプルでは、id=”Table”と名前のついた＜table＞の＜tr＞にclassを付ける仕様になっており、
同じページ内にテーブルが複数ある場合には使えません。
ほんのちょっとだけ手を加えてみました。
[js]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;}
}
}
}
}[/js]
はじめから無条件にページ内の<tr>タグを探してclassをつけるようにしました。
hover要素が不要なテーブルが同じページ内にあれば使えませんです。あしからず。
