0

Javascriptを使用して動的にテーブルを構築しています。XML ファイルで見つかったすべての製品に対して行が作成されます。次のように、MouseOver MouseOut および Onclick の EventListeners を作成しようとしています。

OnClick - クリックされた行の innerHTML でアラートが表示されます。

OnMouseOver - 行クリックの背景を #19405f に変更

OnMouseOut - 背景を #FFFFFF に戻す

コードは次のとおりです。

var root=document.getElementById('information');
var tab=document.createElement('table');
tab.className="productTable";
var tbo=document.createElement('tbody');
for (var i=0; i<mobiles.length; i++){
    var row=document.createElement('tr');
    var cell=document.createElement('td');
    cell.appendChild(document.createTextNode(mobiles[i].name));
    row.appendChild(cell);
    var cell=document.createElement('td');
    cell.appendChild(document.createTextNode(mobiles[i].price));
    row.appendChild(cell);
    tbo.appendChild(row);
}
tab.style.border = "1px solid #000";
tab.appendChild(tbo);
root.appendChild(tab);

何か案は？

4

1 に答える 1

0

onclick イベントについては、提供したスクリプトの最後にこのビットを追加することをお勧めします

var rows = tab.rows; 
for (var i = 0; i < rows.length; i++) {
    rows[i].onclick = (function() { 
        return function() {
          var content = this.cells[0].innerHTML + this.cells[0].innerHTML;
          alert(content);
        }    
    })(i);
}

マウスオーバーとマウスアウトは、シンプルな CSS で処理できます。以下の CSS をスタイルシートに追加します

.productTable tr {background:#FFF;}
.productTable tr:hover {background:#19405f;}

それは必要なことをするはずです。

于 2013-05-27T17:30:56.043 に答える