JS之表格操作

JS表格里的一些简易操作：

先看下面的代码：

 1 <head>
 2 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 3 <title>无标题文档</title>
 4 <script>
 5 window.onload = function()
 6 {
 7     var oTab = document.getElementById('tab1');
 8     alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);
 9 }
10 </script>
11 </head>
12 
13 <body>
14 <table id= "tab1" border = "1" width = "500">
15   <thead>
16   <td>ID</td>
17     <td>NAME</td>
18     <td>AGE</td>
19       </thead>
20   <tbody>
21     <tr>
22       <td>1</td>
23       <td>blue</td>
24       <td>25</td>
25     </tr>
26     <tr>
27       <td>2</td>
28       <td>yellow</td>
29       <td>23</td>
30     </tr>
31     <tr>
32       <td>3</td>
33       <td>blue</td>
34       <td>25</td>
35     </tr>
36     <tr>
37       <td>4</td>
38       <td>yellow</td>
39       <td>23</td>
40     </tr>
41   </tbody>
42 </table>
43 </body>
44 </html>

该代码的功能是取出该表格第二行第二列的内容，也就是yellow。但是

alert(oTab.getElementsByTagName('tbody')[0].getElementsByTagName('tr')[1].getElementsByTagName('td')[1].innerHTML);

此句在表格里取出所需元素，显得很冗长，代码不简洁。这个时候，我们可以用表格里面的相应元素代替其中的getElementsByTagName，要取tbody这个对象，可以使用tBodies，tr可以使用rows，td可以使用cells，此行代码简化如下：

alert(oTab.tBodies[0].rows[1].cells[1].innerHTML);

 

posted @ 2015-11-24 10:22  PhenixWL  阅读(219)  评论(0)    收藏  举报