JavaScript 雙擊選中表格單元格_層和布局特效

JavaScript 雙擊選中表格單元格，類似Windows系統一樣的效果，使用JS獲取表格的“TD”標簽，加入JavaScript動作，因此這里的“TD”你完全可以換成“DD”，也就是把Table換成Div結構同樣生效，不過你要對相應的CSS代碼做些修改。

<html>
<head>
<title>雙擊選中單元格-www.zhaotila.cn</title>
<meta http-equiv="Content-Type" mrc="text/html; charset=gb2312">
</head>
<style type="text/css">
.STYLE3 {font-size: 13px; color: #FF0000; }
.STYLE4 {font-size: 12px}
</style>
<body>
<table id="table1" width="500" border="1" align="center" cellpadding="1" cellspacing="1" bordercolor="#FFFFFF" bgcolor="#CCCCCC">
      <tr>
        <td width="113" height="24" align="center" bgcolor="#FFFFFF"><span class="STYLE3">商品名稱</span></td>
        <td width="83" align="center" bgcolor="#FFFFFF"><span class="STYLE3">數量</span></td>
        <td width="139" align="center" bgcolor="#FFFFFF"><span class="STYLE3">價格</span></td>
        <td width="142" align="center" bgcolor="#FFFFFF"><span class="STYLE3">合計</span></td>
      </tr>
      <tr>
        <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">模板無憂</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">1</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">888</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">888</td>
      </tr>
     <tr>
        <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">數碼相機</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">2</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">2400</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">4800</td>
      </tr>
      <tr>
        <td height="20" align="center" bgcolor="#FFFFFF" class="STYLE4">手機</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">4</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">2400</td>
        <td align="center" bgcolor="#FFFFFF" class="STYLE4">9600</td>
      </tr>
    </table>
<script language="javascript">
var lastSelection = null;
function select(element){
	var e, r, c;
	if(element == null){
		e = event.srcElement;//獲取body元素的原始記錄
	}else{
		e = element; 
 	}
	if(e.tagName == "TD"){
		c = findcell(e);
		if(c != null){
			if(lastSelection != null){
			deselectroworcell(window.lastSelection);
			}
			selectroworcell(c); 
			lastSelection = c;
		} 
	}
	window.event.cancelBubble = true;//取消冒泡語句,用于防止向下一個外層對象冒泡
}

table1.onclick=select;
function findcell(e){
	if(e.tagName == "TD"){
		return e;
	}else if(e.tagName == "BODY"){
		return null;
	}else{
		return findcell(e.parentElement);
	}  
}
function selectroworcell(r){
	r.runtimeStyle.backgroundColor="darkblue";
	r.runtimeStyle.color="white";
}
function deselectroworcell(r){ 
	r.runtimeStyle.backgroundColor = "";
	r.runtimeStyle.color = "";
}
</script>
</body>
</html>

所屬頻道：層和布局特效/更新時間：2012-12-24

[收藏][報錯][返回列表]

相關層和布局特效：

JavaScript 雙擊選中表格單元格_層和布局特效

層和布局特效Rss訂閱特效代碼搜索

層和布局特效推薦

猜你也喜歡看這些