<html>
<head>
<title></title>
<script>
var sOver_color;
var sOut_color;
var sSelected_color;
var sCell_selected_color;
function page_load() {
// alert("load");
var aTables = document.getElementsByTagName("table");
for(var i = 0; i < aTables.length; i++) {
init_table(aTables[i]);
aTables[i].selectedRow = null;
aTables[i].selectedCell = null;
}
sOver_color = "blue";
sOut_color = document.body.bgColor;
sSelected_color = "green";
sCell_selected_color = "red";
}
function init_table(table) {
//alert(table.style.width);
//alert(table.rows.length);
var aRows = table.rows;
for(var i = 0; i < aRows.length; i++) {
aRows[i].onmouseover = tr_mouseover;
aRows[i].onmouseout = tr_mouseout;
aRows[i].onclick = tr_click;
aRows[i].selected = false;
for(var j = 0; j < aRows[i].cells.length; j++) {
aRows[i].cells[j].ondblclick = td_dblclick;
aRows[i].cells[j].selected = false;
}
}
}
function td_dblclick() {
//alert("double click");
if(this.selected) {
this.style.backgroundColor = sOut_color;
var oTr = this.parentNode;
if(oTr.selected)
this.style.backgroundColor = oTr.style.backgroundColor;
}
else
this.style.backgroundColor = sCell_selected_color;
this.selected = !this.selected;
}
function tr_mouseover() {
//alert("mouse over");
if(!this.selected)
this.style.backgroundColor = sOver_color;
// background-color
}
function tr_mouseout() {
//alert("mouse out");
if(!this.selected)
this.style.backgroundColor = sOut_color;
}
function tr_click() {
var oTable = this.parentNode.parentNode;
// alert(oTable.innerHTML);
var oSelectedRow = oTable.selectedRow;
if(oSelectedRow != null) {
oSelectedRow.selected = false;
oSelectedRow.style.backgroundColor = sOut_color;
var aTds = oSelectedRow.childNodes;
//alert(aTds.length);
for(var i = 0; i < aTds.length; i++) {
if(aTds[i].nodeName == "TD") {
//alert();
if(!aTds[i].selected) {
aTds[i].style.backgroundColor = sOut_color;
}
}
}
}
oTable.selectedRow = this;
if(this.selected)
this.style.backgroundColor = sOut_color;
else
this.style.backgroundColor = sSelected_color;
this.selected = !this.selected;
}
</script>
</head>
<body onload="page_load()">
<table border="1" style="width:600px">
<tbody>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
</body>
</html>
关于DOM操作的实例
需积分: 0 163 浏览量
2008-09-26
08:25:14
上传
评论
收藏 5KB RAR 举报
dom.rar （8个子文件） 
dom 
createtable1.html 1KB template.html 127B selecttable.html 5KB BOMTableTest1.html 2KB tips.html 1KB regularExpretion.html 3KB createTable.html 775B edittable.html 3KB
评论0