比較的効率的な表行の背景の変色とハイライトJSの選定

13458 ワード
html .net ブログ asp.net asp
以下の例を抜粋してください。
http://blog.breakn.net/article.asp?id=447
例1:

//                  ，                     
function selectRow(target)  
{  
var sTable = document.getElementById("ServiceListTable")  
for(var i=1;i<sTable.rows.length;i++) //             
{  
if (sTable.rows[i] != target) //           
{  
sTable.rows[i].bgColor = "#ffffff"; //       
sTable.rows[i].onmouseover = resumeRowOver; //  onmouseover     
sTable.rows[i].onmouseout = resumeRowOut;//  onmouseout     
}  
else  
{  
sTable.rows[i].bgColor = "#d3d3d3";  
sTable.rows[i].onmouseover = ""; //        
sTable.rows[i].onmouseout = ""; //        
}  
}  
}  
//   tr      
function rowOver(target)  
{  
target.bgColor='#e4e4e4';  
}  
//   tr      
function rowOut(target)  
{  
target.bgColor='#ffffff';  
}  
//  tr  onmouseover          
function resumeRowOver()  
{  
rowOver(this);  
}  
//  tr  onmouseout          
function resumeRowOut()  
{  
rowOut(this);  
}
ページテストテーブル:

<table width="100%" border="0" cellspacing="0" cellpadding="0" id="ServiceListTable">  
<tr>  
<th>    </th>  
<th>N</th>  
<th>  </th>  
<th>  </th>  
<th>  </th>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>    </td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>    </td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>    </td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
<tr onmouseover="rowOver(this)" onmouseout="rowOut(this)" onclick="selectRow(this)">  
<td>    </td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
<td align="center">&nbsp;</td>  
</tr>  
</table>
例二:
上記はRowに効果を追加し、適切に修正し、各Cellに効果を追加しました。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script language="javascript">
	function selectCell(target) {  
		var sTable = document.getElementById("table1")  
		for(var i=0;i<sTable.rows.length;i++) {    
			for(var j=0; j<sTable.rows[i].cells.length; j++) {
				if (sTable.rows[i].cells[j] != target) {
					sTable.rows[i].cells[j].bgColor = "#ffffff";   
					sTable.rows[i].cells[j].onmouseover = resumeCellOver;   
					sTable.rows[i].cells[j].onmouseout = resumeCellOut;
				} 
				else {
					sTable.rows[i].cells[j].bgColor = "#d3d3d3";  
					sTable.rows[i].cells[j].onmouseover = ""; 
					sTable.rows[i].cells[j].onmouseout = ""; 
				}   
			}
		}  
	}
	
	function cellOver(target) {  
		target.bgColor='#e4e4e4';  
	}  
	
	function cellOut(target) {  
		target.bgColor='#ffffff';  
	}  
	
	function resumeCellOver() {  
		cellOver(this);  
	}  
	
	function resumeCellOut() {  
		cellOut(this);  
	}  
</script>
</head>
<body>
	<table align="center" width="200" height="200" border="1" cellspacing="0" cellpadding="0" id="table1">  
		<tr>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
		</tr>  
		<tr >  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
		</tr>  
		<tr>    
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
		</tr>  
		<tr>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
		</tr>  
	</table>  
</body>
</html>
例三：
適切に修正して、マウスがTableセルCellをクリックする時、最後の二つのクリックされたCellの背景色が変更されます。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Test</title>
<script language="javascript">
	var count = 0;
	
	function selectCell(target) { 
		var sTable = document.getElementById("table1");  
		if(count%2 == 0) {
			document.getElementById("preciousCell").value = target.id;
		} else {
			document.getElementById("currentCell").value = target.id;
		}
		var preciousCellId = document.getElementById("preciousCell").value;
		var currentCellId = document.getElementById("currentCell").value;
		//alert("preciousCellId:" + preciousCellId);
		//alert("currentCellId:" + currentCellId);
		for(var i=0;i<sTable.rows.length;i++) {    
			for(var j=0; j<sTable.rows[i].cells.length; j++) {
				if (sTable.rows[i].cells[j].id != preciousCellId && sTable.rows[i].cells[j].id != currentCellId ) {
					sTable.rows[i].cells[j].bgColor = "#ffffff";   
					sTable.rows[i].cells[j].onmouseover = resumeCellOver;   
					sTable.rows[i].cells[j].onmouseout = resumeCellOut;
				} else {
					sTable.rows[i].cells[j].bgColor = "#d3d3d3";  
					sTable.rows[i].cells[j].onmouseover = ""; 
					sTable.rows[i].cells[j].onmouseout = ""; 
				}  
			}
		}  
		count ++;
	}
	
	function cellOver(target) {  
		target.bgColor='#e4e4e4';  
	}  
	
	function cellOut(target) {  
		target.bgColor='#ffffff';  
	}  
	
	function resumeCellOver() {  
		cellOver(this);  
	}  
	
	function resumeCellOut() {  
		cellOut(this);  
	}  
</script>
</head>
<body>
	<form>
	<input type="hidden" id="preciousCell" />
	<input type="hidden" id="currentCell" />
	<table align="center" width="200" height="200" border="1" cellspacing="0" cellpadding="0" id="table1">  
		<tr>  
			<td id="td1" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td2" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td3" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td4" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
		</tr>  
		<tr >  
			<td id="td5" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td6" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td7" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td8" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
		</tr>  
		<tr>    
			<td id="td9" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td10" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td11" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
			<td id="td12" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">xxx</td>  
		</tr>  
		<tr>  
			<td id="td13" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td14" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td15" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
			<td id="td16" align="center" onmouseover="cellOver(this)" onmouseout="cellOut(this)" onclick="selectCell(this)">&nbsp;</td>  
		</tr>  
	</table>  
	</form>
</body>
</html>
Netty（一）簡単なEcho Server&Cientを作成します。
Ubuntu ServerにJexusを取り付ける