Table表格的一些操作

首先创建一个table表格:

 1 <input type="button" id="btn1" value="获取数据" />
 2 <table id="tab1" border="1" >
 3     <thead>
 4         <tr>
 5             <td>编号</td>
 6             <td>姓名</td>
 7             <td>年龄</td>
 8         </tr>
 9     </thead>
10     <tbody>
11         <tr>
12             <td>1</td>
13             <td>DD</td>
14             <td>23</td>
15         </tr>
16         <tr>
17             <td>2</td>
18             <td>AA</td>
19             <td>33</td>
20         </tr>
21         <tr>
22             <td>3</td>
23             <td>CD</td>
24             <td>54</td>
25         </tr>
26         <tr>
27             <td>4</td>
28             <td>VD</td>
29             <td>32</td>
30         </tr>
31     </tbody>
32 </table>
table表格

通过js获取表格里每个单元格的值:

1     window.onload=function(){
2             var oBtn=document.getElementById('btn1');
3             oBtn.onclick=function(){
4                 var oTab=    document.getElementById('tab1');
5                 var value=    oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[0].getElementsByTagName('td')[2].innerHTML;
6                 alert(value);
7             }
8     }
这是又臭又长的写法

后来程序猿们把他改进了,通过table的对象集合就能取到了单元格的值:

1     window.onload=function(){
2             var oBtn=document.getElementById('btn1');
3             oBtn.onclick=function(){
4                 var oTab=    document.getElementById('tab1');
5                 var value=oTab.tBodies[0].rows[0].cells[2].innerHTML;
6                 alert(value);
7             }
8     }
这个看起来就舒服多了

参考:http://www.w3school.com.cn/htmldom/dom_obj_table.asp

原文地址:https://www.cnblogs.com/Mryjp/p/table.html