function b(){
var a = tb.children[0].children
for (i =0; i< a.length;i++){ if( a[i].nodeType == 1){
alert(a[i].outerHTML)
}
}
}
var a = tb.children[0].children
for (i =0; i< a.length;i++){ if( a[i].nodeType == 1){
alert(a[i].outerHTML)
}
}
}
<html>
<script>
function changeColor(obj)
{
//var objs = document.getElementById("tb").childNodes[0].childNodes;
obj.style.backgroundColor ="red";
}
</script>
<body>
<table id="tb" border="1" width="200">
<tr onclick="changeColor(this)"> <td>test </td> </tr>
<tr onclick="changeColor(this)"> <td>test </td> </tr>
<tr onclick="changeColor(this)"> <td>test </td> </tr>
<tr onclick="changeColor(this)"> <td>test </td> </tr>
</table>
</body>
</html>
最后一个还不会写.呵呵
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title> <script type="text/javascript">
document.documentElement.onclick = function() {if(isOut) Clear(); };
var isOut;
function SwitchStyle(event) {
var sourceCtl = event.srcElement ? event.srcElement.parentNode : event.currentTarget;
isOut = false;
if (sourceCtl.style.backgroundColor == "red") {
if (event.ctrlKey)
sourceCtl.style.backgroundColor = "white";
else {
var table = document.getElementById("tb");
var node;
if (document.all)
node = table.childNodes[0];
else
node = table.childNodes[1];
for (var i = 0; i < node.childNodes.length; ) {
if (node.childNodes[i] != sourceCtl && node.childNodes[i].style.backgroundColor == "red") {
Clear();
sourceCtl.style.backgroundColor = "red";
return;
}
if (document.all)
++i;
else
i += 2;
}
sourceCtl.style.backgroundColor = "white";
}
}
else {
if (event.ctrlKey) {
sourceCtl.style.backgroundColor = "red";
}
else {
Clear();
sourceCtl.style.backgroundColor = "red";
}
}
}
function Flag() {
isOut = true;
}
function Clear() {
var table = document.getElementById("tb");
if (document.all) {
for (var i = 0; i < table.firstChild.childNodes.length; ++i)
table.firstChild.childNodes[i].style.backgroundColor = "white";
}
else {
for (var i = 0; i < table.childNodes[1].childNodes.length; i+=2)
table.childNodes[1].childNodes[i].style.backgroundColor = "white";
}
}
</script></head>
<body>
<form id="form1" runat="server">
<div>
<table id="tb" onmouseout="Flag()">
<tr onclick="SwitchStyle(event);">
<td>
test1
</td>
</tr>
<tr onclick="SwitchStyle(event);">
<td>
test2
</td>
</tr>
<tr onclick="SwitchStyle(event);">
<td>
test3
</td>
</tr>
<tr onclick="SwitchStyle(event);">
<td>
test4
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<title>Table</title>
</head><script type="text/javascript">
window.$ = function(id) {
if(typeof id == 'string') {
return document.getElementById(id);
}
return id;
}var TabClick = function(id, color) {
this.id = id || 'tab';
this.color = color || '#ADD8E6';
this.lastClick = null;
}TabClick.prototype = {
// 初始化
init : function() { // 不让选中文本
var agent = navigator.userAgent.toUpperCase();
if(agent.indexOf('MSIE') > 0) {
document.body.onselectstart = function() {return false;}
}else if(agent.indexOf('GECKO') > 0){
document.body.style.MozUserSelect = 'none';
} this.addClick();
this.cancelSelect();
}, // 为 tr 添加 onclick 事件
addClick : function() {
var rows = this.getRows();
var obj = this;
for(var i = 0; i < rows.length; i++) {
rows[i].defaultBgColor = rows[i].style.backgroundColor;
rows[i].onclick = function(event) {
var e = window.event || event;
obj.cancelBubble(e);
obj.clickEvent(e, this);
if(!e.shiftKey) {
obj.lastClick = this;
}
}
}
}, // 点击页面其他部分时取消所有的选择
cancelSelect : function() {
var obj = this;
document.body.onclick = function() {
obj.clearBgColor();
}
}, // tr click 事件的处理
clickEvent : function(e, row) {
if(!e.ctrlKey) {
this.clearBgColor();
}
if(e.shiftKey) {
this.shiftClick(row);
} else {
this.click(row);
}
}, // 单击某个 tr
click : function(row) {
if(!row.style.backgroundColor) {
row.style.backgroundColor = this.color;
} else {
row.style.backgroundColor = row.defaultBgColor;
}
}, // 去除已选择的 tr
clearBgColor : function() {
var rows = this.getRows();
for(var i = 0; i < rows.length; i++) {
rows[i].style.backgroundColor = rows[i].defaultBgColor;
}
}, // 按下 shift 时的处理
shiftClick : function(row) {
var start = Math.min(this.lastClick.rowIndex, row.rowIndex);
var end = Math.max(this.lastClick.rowIndex, row.rowIndex);;
var rows = this.getRows();
for(var i = start - 1; i < end; i++) {
rows[i].style.backgroundColor = this.color;
}
}, // 获得所有的 tr
getRows : function() {
if(!this.rows) {
this.rows = $(this.id).tBodies[0].rows;
}
return this.rows;
}, // 取消事件冒泡
cancelBubble : function(event) {
if(event.stopPropagation) {
event.stopPropagation();
}else if(!event.cancelBubble) {
event.cancelBubble = true;
}
}
}window.onload = function() {
var tab = new TabClick('tab');
tab.init();
}
</script><style type="text/css">
table#tab {
font-size: 10pt;
font-family: "courier new";
border-collapse: collapse;
border-top: 1px solid #000000;
border-left: 1px solid #000000;
}
table#tab caption {
font-size: 12pt;
font-weight: bold;
padding-bottom: 10px;
}
table#tab th, table#tab td {
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
width: 200px;
}
table#tab thead tr {
background-color: #FFE4C4;
height: 25px;
}
table#tab th {
text-align: center;
}
table#tab td {
padding: 4px 10px;
}
</style>
<body>
<table id="tab" cellpadding="0" cellspacing="0">
<caption>event 对象的属性</caption>
<thead>
<tr>
<th>属性描述</th>
<th>IE 浏览器</th>
<th>Mozilla 浏览器</th>
</tr>
</thead>
<tbody>
<tr>
<td>触发事件的元素</td>
<td>srcElement</td>
<td>target</td>
</tr>
<tr>
<td>事件类型</td>
<td>type</td>
<td>type</td>
</tr>
<tr>
<td>元素的 x 坐标</td>
<td>offsetX</td>
<td>无</td>
</tr>
<tr>
<td>元素的 y 坐标</td>
<td>offsetY</td>
<td>无</td>
</tr>
<tr>
<td>定位元素的 x 坐标</td>
<td>x</td>
<td>layerX</td>
</tr>
<tr>
<td>定位元素的 y 坐标</td>
<td>y</td>
<td>layerY</td>
</tr>
<tr>
<td>窗口的 x 坐标</td>
<td>clientX</td>
<td>clientX</td>
</tr>
<tr>
<td>窗口的 y 坐标</td>
<td>clientY</td>
<td>clientY</td>
</tr>
<tr>
<td>屏幕的 x 坐标</td>
<td>screenX</td>
<td>screenX</td>
</tr>
<tr>
<td>屏幕的 y 坐标</td>
<td>screenY</td>
<td>screenY</td>
</tr>
<tr>
<td>鼠标按键</td>
<td>button</td>
<td>button</td>
</tr>
<tr>
<td>键盘按键</td>
<td>keyCode</td>
<td>keyCode</td>
</tr>
<tr>
<td>按下 shift 键</td>
<td>shiftKey</td>
<td>shiftKey</td>
</tr>
<tr>
<td>按下 alt 键</td>
<td>altKey</td>
<td>altKey</td>
</tr>
<tr>
<td>按下 ctrl 键</td>
<td>ctrlKey</td>
<td>ctrlKey</td>
</tr>
<tr>
<td>上一级元素</td>
<td>fromElement</td>
<td>relatedTarget</td>
</tr>
<tr>
<td>下一级元素</td>
<td>toElement</td>
<td>relatedTarget</td>
</tr>
</tbody>
</table>
</body>
</html>可以用单击、Ctrl + 单击、Shift + 单击,点页面其他部分时取消选择
lz很满足了吧