87,921
社区成员
发帖
与我相关
我的任务
分享
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<script language=javascript>
var TH_HEIGHT="20px";
var THCOLOR="#ffff99";
var THBGCOLOR= "#ccecff";
var NEW_COLOR="#ffffff";
var oldrowover
var oldrow;
function createEventTable() {
var newRow,col1,col2,col3;
var ln = document.getElementById("tb1").rows.length;
if( ln > 0){
for(var i=0; i<ln; i++){
if(document.getElementById("tb1").rows.length <= 0)break;
document.getElementById("tb1").deleteRow(-1);
}
}
for(var colno=0; colno<15; colno++){
newRow = document.getElementById("tb1").insertRow(-1);
newRow.id = 'r'+colno;
document.getElementById("r"+colno).height = TH_HEIGHT;
document.getElementById("r"+colno).bgColor = THCOLOR;
col1=newRow.insertCell(0);
col2=newRow.insertCell(1);
col3=newRow.insertCell(2);
col1.id="col1"+colno
col2.id = "col2"+colno;
col3.id = "col3"+colno;
col1.innerText = "列一"+colno;
col2.innerText = "列二"+colno;
col3.innerText = "列三"+colno;
newRow.onclick=alertMe;
newRow.onmouseover=over;
}
}
function alertMe(){
this.bgColor=NEW_COLOR;
if(oldrow!=null&&oldrow!=this){
oldrow.bgColor=THCOLOR;
}
oldrow=this;
}
function over(){
if(this!=oldrow) this.bgColor="red";
if(oldrowover!=null&&oldrowover!=this&&oldrowover!=oldrow){
oldrowover.bgColor=THCOLOR;
}
oldrowover=this;
}
window.onload=function(){
createEventTable();
}
</script>
<body >
<TABLE cellSpacing="0" borderColorDark="black" cellPadding="1"
borderColorLight="black" border="1">
<thead>
<COLGROUP>
<COL align="center">
</COL>
<COL align="center">
</COL>
<COL align="center">
</COL>
<COL align="center">
</COL>
<TR height="22px" bgColor="#ccecff">
<TH width="36" >列1</TH>
<TH width="36" >列2</TH>
<TH width="36" >列3</TH>
</TR>
</thead>
<TBODY id="tb1">
</TBODY>
</TABLE>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<script language=javascript>
var TH_HEIGHT="20px";
var THCOLOR="#ffff99";
var THBGCOLOR= "#ccecff";
var NEW_COLOR="#ffffff";
var oldrowover
var oldrow;
function createEventTable() {
var newRow,col1,col2,col3;
var ln = document.getElementById("tb1").rows.length;
if( ln > 0){
for(var i=0; i<ln; i++){
if(document.getElementById("tb1").rows.length <= 0)break;
document.getElementById("tb1").deleteRow(-1);
}
}
for(var colno=0; colno<15; colno++){
newRow = document.getElementById("tb1").insertRow(-1);
newRow.id = 'r'+colno;
document.getElementById("r"+colno).height = TH_HEIGHT;
document.getElementById("r"+colno).bgColor = THCOLOR;
col1=newRow.insertCell(0);
col2=newRow.insertCell(1);
col3=newRow.insertCell(2);
col1.id="col1"+colno
col2.id = "col2"+colno;
col3.id = "col3"+colno;
col1.innerText = "列一"+colno;
col2.innerText = "列二"+colno;
col3.innerText = "列三"+colno;
newRow.onclick=alertMe;
newRow.onmouseover=over;
}
}
function alertMe(){
this.bgColor=NEW_COLOR;
if(oldrow!=null&&oldrow!=this){
oldrow.bgColor=THCOLOR;
}
oldrow=this;
}
function over(){
this.bgColor="red";
if(oldrowover!=null&&oldrowover!=this&&oldrowover!=oldrow){
oldrowover.bgColor=THCOLOR;
}
oldrowover=this;
}
window.onload=function(){
createEventTable();
}
</script>
<body >
<TABLE cellSpacing="0" borderColorDark="black" cellPadding="1"
borderColorLight="black" border="1">
<thead>
<COLGROUP>
<COL align="center">
</COL>
<COL align="center">
</COL>
<COL align="center">
</COL>
<COL align="center">
</COL>
<TR height="22px" bgColor="#ccecff">
<TH width="36" >列1</TH>
<TH width="36" >列2</TH>
<TH width="36" >列3</TH>
</TR>
</thead>
<TBODY id="tb1">
</TBODY>
</TABLE>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<script language=javascript>
var t, n, c;
var lastrow;
function doit(){
if(event.keyCode==38){
if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";
if(c==null) c=0;
else if(c==0) c=n-1;
else c--;
t.rows[c].style.backgroundColor = "#cceeff";
}
else if(event.keyCode==40){
if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";
if(c==null) c=0;
else if(c==n-1) c=0;
else c++;
t.rows[c].style.backgroundColor = "#cceeff";
}
}
window.onload=function(){
t = document.getElementById("tb");
n = t.rows.length;
for(var i=0;i<n;i++){
t.rows[i].onclick = function(){
for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"
this.style.backgroundColor="#cceeff";
};
t.rows[i].onmouseover = function(){
for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"
this.style.backgroundColor="#cceeff";
};
}
document.onkeyup = doit;
}
</script>
<body >
<table id="tb" border=1px gray>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
<tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
<tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
<tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
</table>
</body>
</html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<META http-equiv="Content-Style-Type" content="text/css">
</head>
<script language=javascript>
var t, n, c;
var lastrow;
function doit(){
if(event.keyCode==38){
if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";
if(c==null) c=0;
else if(c==0) c=n-1;
else c--;
t.rows[c].style.backgroundColor = "#cceeff";
}
else if(event.keyCode==40){
if(c!=null) t.rows[c].style.backgroundColor = "#ffffff";
if(c==null) c=0;
else if(c==n-1) c=0;
else c++;
t.rows[c].style.backgroundColor = "#cceeff";
}
}
window.onload=function(){
t = document.getElementById("tb");
n = t.rows.length;
for(var i=0;i<n;i++){
t.rows[i].onclick = function(){
for(var j=0;j<n;j++) t.rows[j].style.backgroundColor="#ffffff"
this.style.backgroundColor="#cceeff";
};
}
document.onkeyup = doit;
}
</script>
<body >
<table id="tb" border=1px gray>
<tr><td>11</td><td>12</td><td>13</td><td>14</td><td>15</td></tr>
<tr><td>21</td><td>22</td><td>23</td><td>24</td><td>25</td></tr>
<tr><td>31</td><td>32</td><td>33</td><td>34</td><td>35</td></tr>
<tr><td>41</td><td>42</td><td>43</td><td>44</td><td>45</td></tr>
<tr><td>51</td><td>52</td><td>53</td><td>54</td><td>55</td></tr>
</table>
</body>
</html>