function b(){
    var a = tb.children[0].children
    for (i =0; i< a.length;i++){        if( a[i].nodeType == 1){
        
            alert(a[i].outerHTML)
            
           }
    }
    
    }

解决方案 »

  1.   

    改背景色可以修改 tr对象的bgColor值
      

  2.   

    a[i].style.backgroundColor = 'red'
      

  3.   

    ]
    <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>
    最后一个还不会写.呵呵 
      

  4.   


    <!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>
      

  5.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <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 + 单击,点页面其他部分时取消选择
      

  6.   

    ls的全是了。
    lz很满足了吧
      

  7.   

    呵呵,特意做的。我做的时候 7 楼的回复还没有,最近才开始学习 JavaScript,看到好玩的题目时顺便自己练习练习  ^_^