DOM

表格的应用

<table> 标签定义 HTML 表格。

简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。

tr 元素定义表格行，th 元素定义表头，td 元素定义表格单元。

更复杂的 HTML 表格也可能包括 caption、col、colgroup、thead、tfoot 以及 tbody 元素。

     <script>
     window.onload=function()
     {
        var tab=document.getElementById('tab');
        alert(tab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[2].getElementsByTagName('td')[1].innerHTML);
     }
     </script>

表格具备的简便操作：getElementsByTagName('tbody')=tBodies, getElementsByTagName('tr')=rows, getElementsByTagName('td')=cells,

     <script>
     window.onload=function()
     {
        var tab=document.getElementById('tab');
        alert(tab.tBodies[0].rows[2].cells[1].innerHTML);
     }
     </script>

<body>
<table id="tab" border="1" width="400">
  <thead>
    <td>ID</td>
    <td>name</td>
    <td>sex</td>
  </thead>    
  <tbody>
    <tr>  
        <td>1</td>
        <td>red</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>green</td>
        <td></td>        
    </tr>
        <tr>
        <td>3</td>
        <td>blue</td>
        <td></td>        
    </tr>
  </tbody>
</table>
</body>

表格中的隔行变色

        for(i=0;i<tab.tBodies[0].rows.length;i++)
        {
                  tab.tBodies[0].rows[i].style.background=i%2?"#ccc":"";
        }

鼠标移入移出表格高亮情况

        var tab=document.getElementById('tab');
        var oldBgColor="";
        var i=0;
        
        for(i=0;i<tab.tBodies[0].rows.length;i++)
        {
            tab.tBodies[0].rows[i].style.background=i%2?"#ccc":"";
            tab.tBodies[0].rows[i].onmouseover=function()
            {            
                oldBgColor=this.style.background;
                this.style.background="yellow";
            };
            tab.tBodies[0].rows[i].onmouseout=function()
            {
                this.style.background=oldBgColor;
            }
        }

添加、删除

• DOM方法的使用

 1 <script>     
 2 window.onload=function()
 3      {
 4         var tab=document.getElementById('tab');
 5         var txt=document.getElementById('txt');
 6         var btn=document.getElementById('btn');
 7         var iNowId=tab.tBodies[0].rows.length+1;
 8         
 9         btn.onclick=function()
10         {
11             var tr=document.createElement('tr');
12             var td=null;
13             
14             td=document.createElement('td');
15             td.innerHTML=iNowId++;
16             tr.appendChild(td);
17             
18             td=document.createElement('td');
19             td.innerHTML=txt.value;
20             tr.appendChild(td);
21             
22             td=document.createElement('td');
23             td.innerHTML="<a href='javascript:;'>删除</a>";
24             tr.appendChild(td);
25             
26             td.getElementsByTagName('a')[0].onclick=function()
27             {
28                 tab.tBodies[0].removeChild(this.parentNode.parentNode);
29             }
30             
31             tab.tBodies[0].appendChild(tr);
32             
33         }
34     
35      }
36 </script>

<body>
<input id="txt" type="text"/>
<input id="btn" type="button" value="添加"/>
<table id="tab" border="1" width="400">
  <thead>
    <td>ID</td>
    <td>name</td>
    <td>操作</td>
  </thead>    
  <tbody>
    <tr>  
        <td>1</td>
        <td>red</td>
        <td></td>
    </tr>
    <tr>
        <td>2</td>
        <td>green</td>
        <td></td>        
    </tr>
    <tr>
        <td>3</td>
        <td>blue</td>
        <td></td>        
    </tr>
    <tr>
        <td>4</td>
        <td>black</td>
        <td></td>        
    </tr>
    <tr>
        <td>5</td>
        <td>yellow</td>
        <td></td>        
    </tr>
  </tbody>
</table>
</body>

搜索表格中的关键词所在的行

 1  <script>
 2     window.onload=function()
 3     {
 4         var tab=document.getElementById('tab');
 5         var btn=document.getElementById('btn');
 6         var txt=document.getElementById('txt');
 7         
 8         btn.onclick=function()
 9         {
10             var i=0;
11             for(i=0;i<tab.tBodies[0].rows.length;i++)
12             {
13                 //忽略大小写——toLowerCase()
14                 var sValueInTab=tab.tBodies[0].rows[i].cells[1].innerHTML.toLowerCase();
15                 var sValueInTxt=txt.value.toLowerCase();
16                 
17                 var arr=sValueInTxt.split(' ');//切割字符窜
18                 var bFond=false;
19                 //判断多个关键词的搜索
20                 for(var j=0;j<arr.length;j++)
21                 {
22                     if(sValueInTab.search(arr[j])!=-1)//判断字符窜在arr里面
23                     {
24                         bFond=true;
25                         break;
26                     }
27                 }
28                 //判断关键词在哪一行
29                 if(bFond)    
30                 {
31                     tab.tBodies[0].rows[i].style.background='yellow';
32                 }
33                 else
34                 {
35                     tab.tBodies[0].rows[i].style.background='';
36                 }
37             }
38         }
39     }
40   </script>

排序

1.转成数组

2.数组排序

3.重新插入

示例

 1 <!doctype html>
 2 <html>
 3 <head>
 4      <meta charset="utf-8">
 5      <title>未命名</title>
 6      <script>
 7      window.onload=function()
 8      {
 9         
10         var ul1=document.getElementById('ul1');
11         var btn=document.getElementById('btn');
12         
13         btn.onclick=function()
14         {
15             ali=ul1.getElementsByTagName('li');
16             var arr=[];
17             var i=0;
18             
19             //ali本身不能排序，--转成数组
20             for(i=0; i<ali.length; i++)
21             {    
22                 arr[i]=ali[i];        
23             }
24             //数组排序
25             arr.sort(function(li1, li2){
26                 return parseInt(li1.innerHTML)-parseInt(li2.innerHTML)
27             });
28             
29             //重新插入
30             for(i=0; i<ali.length; i++)
31             {
32                 ul1.appendChild(arr[i]);
33             }
34         }
35     }
36         
37     
38      </script>
39 </head>
40 <body>
41 <input id="btn" type="button" value="排序"/>
42 <ul id="ul1">
43     <li>33</li>
44     <li>9</li>
45     <li>12</li>
46     <li>5</li>
47     <li>66</li>
48 </ul>
49 </body>
50 </html>

表格中的排序应用

示例

 1 <!doctype html>
 2 <html>
 3 <head>
 4      <meta charset="utf-8">
 5      <title>未命名</title>
 6      <script>
 7     window.onload=function()
 8     {
 9         var tab=document.getElementById('tab');
10         var btn=document.getElementById('btn');
11         var tt=false;
12         
13         btn.onclick=function()
14         {
15             var arr=[];
16             var i=0;
17             
18             for(i=0; i<tab.tBodies[0].rows.length;i++)
19             {
20                 arr[i]=tab.tBodies[0].rows[i];
21             }
22             
23             arr.sort(function(tr1, tr2){
24                 if(tt)
25                 {
26                    return parseInt(tr1.cells[0].innerHTML)-parseInt(tr2.cells[0].innerHTML);    
27                 }
28                 else
29                 {
30                    return parseInt(tr2.cells[0].innerHTML)-parseInt(tr1.cells[0].innerHTML);
31                 }
32             })
33             
34             for(i=0; i<arr.length; i++)
35             {
36                 tab.tBodies[0].appendChild(arr[i]);
37             }            
38             
39             tt=!tt;
40         /*    if(tt)
41             {
42                 tt=false;
43             }
44             else
45             {
46                 tt=true;
47             } */
48         }
49     }    
50      </script>
51 </head>
52 <body>
53 
54 <input id="btn" type="button" value="排序"/>
55 <table id="tab" border="1" width="400">
56   <thead>
57     <td>ID</td>
58     <td>name</td>
59     <td>操作</td>
60   </thead>    
61   <tbody>
62     <tr>  
63         <td>3</td>
64         <td>red</td>
65         <td></td>
66     </tr>
67     <tr>
68         <td>2</td>
69         <td>green</td>
70         <td></td>        
71     </tr>
72     <tr>
73         <td>1</td>
74         <td>blue</td>
75         <td></td>        
76     </tr>
77     <tr>
78         <td>5</td>
79         <td>black</td>
80         <td></td>        
81     </tr>
82     <tr>
83         <td>4</td>
84         <td>yellow</td>
85         <td></td>        
86     </tr>
87   </tbody>
88 </table>
89 </body>
90 </html>

目标很遥远，但是如果你拼了命努力，即使到最后没有达到目标，但是你会发现，在某种程度上你已经成功了。