关于表格(table)的操作

1.获取

   tBodies    tHead   tFoot  rows   cells  

例如：

<table id="tab1" border="1" width="500">
        <td>ID</td>
        <td>姓名</td>
        <td>年龄</td>
        <tr>
            <td>1</td>
            <td>张三</td>
            <td>12</td>
        </tr>
        <tr>
            <td>2</td>
            <td>里斯</td>
            <td>12</td>
        </tr>
        <tr>
            <td>3</td>
            <td>无望</td>
            <td>14</td>
        </tr>
        <tr>
            <td>4</td>
            <td>王五</td>
            <td>124</td>
        </tr>
        <tr>
            <td>4</td>
            <td>王位</td>
            <td>134</td>
        </tr>
    </table>

获取  张三

var oTab = document.querySelector("#tab1");
            var td = oTab.getElementsByTagName("tbody")[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML;

针对表格的获取方法

 var td = oTab.tBodies[0].rows[1].cells[1].innerHTML;

 

 

隔行变色

 var oTab = document.querySelector("#tab1");
          for(var i=0;i<oTab.tBodies[0].rows.length;i++){
             if(i%2){
                 oTab.tBodies[0].rows[i].style.background="red"
             } 
          }

添加鼠标移入移出效果

 var oTab = document.querySelector("#tab1");
            var oldColor="";
          for(var i=0;i<oTab.tBodies[0].rows.length;i++){
              /*鼠标移入*/
              oTab.tBodies[0].rows[i].onmouseover=function(){
                  oldColor=this.style.background;//保存旧的颜色值防止鼠标移除后把原来的底色修改掉
                this.style.background="red"
              }
               oTab.tBodies[0].rows[i].onmouseout=function(){
                this.style.background=oldColor;
              }
             if(i%2){
                 oTab.tBodies[0].rows[i].style.background="#DDD"
             } 
          }