js 表格操作

最新推荐文章于 2024-07-30 11:29:23 发布

我的奋斗ing

最新推荐文章于 2024-07-30 11:29:23 发布

阅读量1.3k

点赞数

分类专栏： js2

本文链接：https://blog.csdn.net/qq_35187942/article/details/85885798

版权

js2 专栏收录该内容

26 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
   <head>
       <meta charset="{CHARSET}">
       <title></title>
       <script>
           /*tHead:表个头
           tBodies:表格正文
           tFoot:表格尾
               rows:行
               cells：列
           */
           window.onload = function(){

               var data = [
                   {id:1,username:'leo',sex:'男'},
                   {id:2,username:'le',sex:'女'},
                   {id:3,username:'lo',sex:'男'},
                   {id:4,username:'eo',sex:'男'},
               ];
               var oTab = document.getElementById('tab1');
               var oTbody = oTab.tBodies[0];

               for(var i=0;i<data.length;i++){
                   var oTr = document.createElement('tr');

                   var oTd = document.createElement('td');
                   oTd.innerHTML = data[i].id;
                   oTr.appendChild(oTd);

                   if(i%2 ==0){
                       oTr.style.background = 'white';
                   }else{
                       oTr.style.background = 'gray';
                   }

                   oTd = document.createElement('td');
                   oTd.innerHTML = data[i].username;
                   oTr.appendChild(oTd);

                   oTd = document.createElement('td');
                   oTd.innerHTML = data[i].sex;
                   oTr.appendChild(oTd);

                   oTd = document.createElement('td');
                   //oTd.innerHTML = '&nbsp'
                   oTr.appendChild(oTd);

                   var oA = document.createElement('a');
                   oA.innerHTML = '删除';
                   oA.href = 'javascript:;';
                   oA.onclick = function(){
                       oTbody.removeChild(this.parentNode.parentNode);
                       for(var i=0;i<oTbody.rows.length;i++){
                           if(i%2 ==0){
                       oTbody.rows[i].style.background = 'white';
                   }else{
                       oTbody.rows[i].style.background = 'gray';
                   }
                       }

                   }
                   oTd.appendChild(oA);
                   oTbody.appendChild(oTr);

               }

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

           }
       </script>
   </head>
   <body>
       <table id="tab1" width="100%" border="1px">
           <thead>
               <tr>
                   <th>编号</th>
                   <th>姓名</th>
                   <th>性别</th>
                   <th>操作</th>
               </tr>
           </thead>
           <tbody>

           </tbody>
       </table>

   </body>
</html>