0

私はJavaScriptが初めてで、練習のために、JavaScriptを使用して特定のクラスのテーブルの行をストライプ化しています。それに加えて、JavaScriptのみを使用して、テーブルの行に「ホバー」効果を作成しようとしています。

onmouseover 効果を作成できましたが、テーブル行のデフォルト スタイル onmouseout に戻すのは非常に困難です。

これは css または JQuery を使用して簡単に実現できることを覚えておいてください。ただし、これについては、javascript のみに固執したいと思います。

私が試したこと：

    function alternate(){
        var tables = document.getElementsByTagName("table");     

        //apply the code to ALL tables on the page with a particular class
        for (var ti = 0; ti < tables.length; ++ti) {
            if (tables[ti].className == "striped"){ //stripe tables
                var rows = tables[ti].getElementsByTagName("tr");   
                for(i = 0; i < rows.length; i++){           
                    //change style of even rows to create striped effect
                    if(i % 2 == 0){ 
                        rows[i].className += "even"; //stripe even rows while maintaining default style to odd rows
                    }
                    rows[i].onmouseover = function() {
                        this.className="";
                        this.className="hovered";
                    }
                    rows[i].onmouseout = function() { 
                        if(i % 2 == 0){
                            this.className="even";
                        }else{
                            this.className="odd";
                        }                       
                    }
                }       
            }
        }
    }
4

1 に答える 1

1

あなたの質問を完全に理解したかどうかはわかりませんが、あなたが意図したことを実行する jsfiddle を作成しました。

問題は、私が知る限り、row[i].mouseout がトリガーされると、i の値がテーブル内のテーブル行の数になることです。修正は、マウスオーバーで元のクラス名を保存し、マウスアウトでそのクラス名を再割り当てすることです。これがフィドルです。http://jsfiddle.net/LBaZu/4/

function alternate() {
    var tables = document.getElementsByTagName("table");
    for (var ti = 0; ti < tables.length; ++ti) {
        if (tables[ti].className == "striped") {
            var rows = tables[ti].getElementsByTagName("tr");
            var cls; // Variable to save the className
            for (var i = 0; i < rows.length; i++) {
                if (i % 2 == 0) rows[i].className = "even";
                rows[i].onmouseover = function() {
                    cls = this.className;  // Assign the className here
                    this.className = "hovered";
                }
                rows[i].onmouseout = function() {
                    this.className = (cls == 'even') ? cls : 'odd';
                }
            }
        }
    }
}

編集：私はあなたの質問を読み直しましたが、奇数テーブルの行のクラス名を、以前ではなく、マウスアウト時に奇数に設定したいだけだと思いました。

于 2012-11-11T21:38:04.490 に答える