由浅入深JavaScript8基础-Dom表格基础

最新推荐文章于 2022-04-16 01:03:41 发布

尼古拉斯_张三

最新推荐文章于 2022-04-16 01:03:41 发布

阅读量417

点赞数 1

分类专栏： web前端大神前端——JavaScript板块文章标签： JavaScript DOM表格表格表格元素获取 tBodies

本文链接：https://blog.csdn.net/zhangdongxu999/article/details/73061003

版权

web前端同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

大神前端——JavaScript板块

15 篇文章 7 订阅

订阅专栏

DOM基础——DOM表格基础
JS提供了一套快速访问表格的方法。但是没有这些方法也能够操作表格元素。

当然会变得很麻烦。

表格元素获取

   tBodies, 表格主体 == tbody
   tHead, 表头 == thead
   tFoot, 表尾 == tfoot
   rows, 行 rows[行数] == tr
   cells 列 cells[列数] == td
表格结构
           <table id='t1' >
               <thead>
                   <td>ID</td>
                   <td>姓名</td>
                   <td>年龄</td>
               </thead>
               <tbody>
                   <tr>
                       <td>1</td>
                       <td>js</td>
                       <td>18</td>
                   </tr>
               </tbody>
               <tfoot>
                   <td>ID</td>
                   <td>姓名</td>
                   <td>年龄</td>
               </tfoot>
           </table>

   一个表格可以有多个tbody但只能有一个thead和一个tfoot。
   对于上述例子我们想要获取tbody中第二列文本内容js有什么办法呢？
eg:       <script type="text/javascript">
           window.onload = function(){
               var otab = document.getElementById('t1');
               var name = otab.getElementsByTagName('tbody')[0]
               .getElementsByTagName('tr')[0]
               .getElementsByTagName('td')[1];
               var name2 = otab.tBodies[0].rows[0].cells[1];
               alert(name.innerHTML);
               alert(name2.innerHTML)
           }
       </script>
   这个例子使用了两种方式获得文本js，第一种是使用前文将的常规的获取方法，
   第二种使用JS提供的快速访问表格的方法。可见代码量相差之大。
建议访问表格就是用表格方法，简便不容易出错。

eg:表格遍历
           <script type="text/javascript">
           window.onload = function(){
               var otab = document.getElementById('t1');
               for(var i= 0;i<otab.tBodies[0].rows.length;i++){
                   var name = otab.tBodies[0].rows[i].cells[1];
                   console.log(name.innerHTML);
               }
           }
       </script>
   </head>
   <body>
           <table id='t1' >
               <thead>
                   <td>ID</td>
                   <td>姓名</td>
                   <td>年龄</td>
               </thead>
               <tbody>
                   <tr>
                       <td>1</td>
                       <td>js</td>
                       <td>18</td>
                   </tr>
                   <tr>
                       <td>2</td>
                       <td>Jquery</td>
                       <td>20</td>
                   </tr>
                   <tr>
                       <td>3</td>
                       <td>html</td>
                       <td>22</td>
                   </tr>
               </tbody>
           </table>
   </body>

eg:隔行变色+选中变色
           <style>
           table, th, td
              {
              border: 1px solid red;
              }
       </style>
       <script type="text/javascript">
           window.onload = function(){
               var otab = document.getElementById('t1');
               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==0){
                       otab.tBodies[0].rows[i].style.background='gray';
                   }else{
                       otab.tBodies[0].rows[i].style.background='blue';
                   }
               }
           }
       </script>
   </head>
   <body>
           <table id='t1' >
               <thead>
                   <td>ID</td>
                   <td>姓名</td>
                   <td>年龄</td>
               </thead>
               <tbody>
                   <tr>
                       <td>1</td>
                       <td>js</td>
                       <td>18</td>
                   </tr>
                   <tr>
                       <td>2</td>
                       <td>Jquery</td>
                       <td>20</td>
                   </tr>
                   <tr>
                       <td>3</td>
                       <td>html</td>
                       <td>22</td>
                   </tr>
               </tbody>
           </table>
   </body>


总结：DOM操作比较繁琐，只能依靠大量练习，学好DOM是学好JavaScript的关键。

——总结——

限于文章篇幅原因，这里仅仅介绍冰山一角。由于笔者的水平有限，编写时间也很仓促，
文中难免会出现一些错误或者不准确的地方，不妥之处恳请读者批评指正

尼古拉斯_张三

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
由浅入深JavaScript8基础-Dom表格基础

DOM基础——DOM表格基础JS提供了一套快速访问表格的方法。但是没有这些方法也能够操作表格元素。当然会变得很麻烦。表格元素获取 tBodies, 表格主体 == tbody tHead, 表头 == thead tFoot, 表尾 == tfoot rows, 行 rows[行数] == tr cells 列 cells[列数] =
复制链接

扫一扫