Javascript-网页编程-DHTML-表格创建/删除/设置/排序

最新推荐文章于 2017-09-21 15:14:51 发布

夏小弥

最新推荐文章于 2017-09-21 15:14:51 发布

阅读量398

点赞数

分类专栏： html网页编程文章标签： dhtml javascript html css 表格

本文链接：https://blog.csdn.net/x121850182/article/details/51919577

版权

html网页编程专栏收录该内容

15 篇文章 0 订阅

订阅专栏

、对表格的一些操作（创建，删除，设置颜色，排序等）

1、创建表格

1）通过DOM树模型，一层一层的建立表格 ------ 最底层的创建方式，费劲，但功能很强

2）利用table中的现有的功能实现的

注：

1、表格的,<table>标签和<tr>标签中间，其实还隐藏着一个<tbody>标签----表格体，<tbody>下面才是<tr>

2、如果<table>和<tr>之间有空格或换行(空格和换行看成文本节点)，则table的第一个孩子节点为文本节点，nodeName:"#text"第二个是tbody

3、<tbody>和#text节点是兄弟关系

只要有空白符出现，皆算一个节点

[java]view plaincopy 
   
 <html>  
   <head>  
     <title>DHTML技术演示---表格创建--用table对象和tr对象中现有的方法来操纵表格</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
      <style type="text/css">  
         table {  
             border:#ff80ff;  
             width:600px;  
             border-collapse:collapse;  
         }  
         table td{  
             border:#0000ff 1px solid;  
             padding:5px;  
         }  
      </style>  
        
      <script type="text/javascript">  
         function createTable(){  
             var oTableNode = document.createElement("table");//创建表格对象  
             var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象  
             var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象  
             oTdNode.innerHTML="单元格中的内容";  
             document.getElementsByTagName("div")[0].appendChild(oTableNode);  
         }  
           
         function createTable2(){  
             var oTableNode = document.createElement("table");//创建表格对象  
               
             //多行多列的表格,如5*6  
             for(var x=1;x<=5;x++){  
                 var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象  
                 for(var y=1;y<=8;y++){  
                    var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象  
                    oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";  
                 }  
             }  
               
             document.getElementsByTagName("div")[0].appendChild(oTableNode);  
         }  
           
         //用户自定义行号与列号的方式创建表格  
         function createTable3(){  
             var oTableNode = document.createElement("table");//创建表格对象  
             //给表格动态地添加属性(id)  
             //法1  
             //oTableNode.id = "tableId";//变量方式  
             //法2  
             oTableNode.setAttribute("id","tableId");//函数的方式  
               
             //由用户指定行数与列数的表格  
             //获取用户输入的行数与列数  
             var rowNum =parseInt(document.getElementsByName("rowNum")[0].value);  
             var colNum =parseInt( document.getElementsByName("colNum")[0].value);  
             //健壮性防护  
             if(isNaN(rowNum) || isNaN(colNum) || rowNum<=0 || colNum<=0 ){  
                 alert("行号和列号必须是大于0的整数");  
                 return;  
             }  
             for(var x=1;x<=rowNum;x++){  
                 var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象  
                 for(var y=1;y<=colNum;y++){  
                    var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象  
                    oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";  
                 }  
             }  
               
             document.getElementsByTagName("div")[0].appendChild(oTableNode);  
         }  
        
         //删除指定的行  
         function delRow(){  
             //由指定的id来获取该表格  
             var oTableNode = document.getElementById("tableId");  
             //alert(oTableNode.nodeName);  
             //alert(oTableNode);  
             //防护  
             if(oTableNode==null){  
                 alert("表格不存在!");  
                 return;  
             }  
               
             //删除行的处理代码  
             //获取用户输入的行号  
             var delRowNum = parseInt(document.getElementsByName("delRowNum")[0].value);  
             //alert(delRowNum);  
             //行号的健壮性防护  
             if(isNaN(delRowNum) ){  
                 alert("行号必须是数字");  
                 return;  
             }  
             if(!(delRowNum>0 && delRowNum<=oTableNode.rows.length)){  
                 alert("该行不存在!");  
                 return;  
             }   
             //删除行  
             oTableNode.deleteRow(delRowNum-1);  
               
         }  
           
         //删除指定的列  
         function delCol(){  
             //由指定的id来获取该表格  
             var oTableNode = document.getElementById("tableId");  
             //alert(oTableNode.nodeName);  
             //alert(oTableNode);  
             //防护  
             if(oTableNode==null){  
                 alert("表格不存在!");  
                 return;  
             }  
               
             //删除列的处理代码  
             //获取用户输入的列号  
             var delColNum = parseInt(document.getElementsByName("delColNum")[0].value);  
             //alert(delColNum);  
             //行号的健壮性防护  
             if(isNaN(delColNum) ){  
                 alert("列号必须是数字");  
                 return;  
             }  
             if(!(delColNum>0 && delColNum<=oTableNode.rows[0].cells.length)){  
                 alert("该列不存在!");  
                 return;  
             }   
             //删除列:※※表格中没有现成的删除列的函数，因此只能自己遍历行，然后通过tr对象中的deleteCell来实现  
             for(var x=0; x<oTableNode.rows.length;x++){  
                 oTableNode.rows[x].deleteCell( delColNum-1 );  
             }  
               
         }  
           
      </script>  
   </head>  
     
   <body>  
       <input type="button" value="创建表格" οnclick="createTable()" />  
       <input type="button" value="创建多行多列表格" οnclick="createTable2()" />  
       <br/><br/><br/>  
       <!--添加-->  
         行数:<input type="text" name="rowNum"/>     
        列数:<input type="text" name="colNum"/>  
       <input type="button" value="创建表格" οnclick="createTable3()" />  
       <br/><br/><br/>  
        
      <!--删除-->  
      <h3>删除前面由用户指定行列号方式创建的表格</h3> <br/>  
         行号:<input type="text" name="delRowNum"/>     
       <input type="button" value="删除行" οnclick="delRow()" />  
         列号:<input type="text" name="delColNum"/>  
       <input type="button" value="删除列" οnclick="delCol()" />  
       <hr/>  
         
       <div></div>  
         
   </body>  
     
 </html>  

效果：

3、设置颜色和排序

1）颜色：通过奇偶行号，设置不同的两种颜色，且鼠标放上后变为第三种颜色，离开后恢复原来颜色

2）排序：通过点击表格中的年龄项，表格中的内容通过年龄的大小，进行排序，且年龄项做出相应的变化

[java]view plaincopy 
   
 <html>  
   <head>  
     <title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>  
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
      <style type="text/css">  
         @import url(table.css);  
         .one{  
             background:#80ff00;  
         }         
         .two{  
             background:rgb(210,0,0);  
         }  
         .over{  
             background-color:#ffff00;  
         }  
         a{  
             text-decoration:none;  
         }  
      </style>  
        
      <script type="text/javascript">  
         function trColor(){  
             var oTableNode = document.getElementById("dataTable");  
             var arrTrs = oTableNode.rows;  
             for(var x=1;x<arrTrs.length; x++){  
                 if(x%2==1){  
                     arrTrs[x].className="one";  
                 }else{  
                     arrTrs[x].className="two";  
                 }  
                   
                 //为每一行动态注册事件处理方法  
                 var oldClassName;  
                 arrTrs[x].οnmοuseοver=function(){  
                     oldClassName=this.className;  
                     this.className="over";  
                 };  
                 arrTrs[x].οnmοuseοut=function(){  
                     this.className=oldClassName;  
                 };  
                   
             }  
         }  
         //onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。但如果把该段代码放在<table>之后则有效果，放表格内也可以，<span style="font-family: Arial, Helvetica, sans-serif;">但<script>标签要包裹其一起放过去</span><span style="font-family: Arial, Helvetica, sans-serif;">)，而且只能执行这一个方法</span>  
             onload = function(){  
             trColor();  
             //还可以在这里写其它代码，甚至调用其它函数  
         };//这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行，而是在该事件发生时才会调用。并且可以在function()中调用多个函数.  
      </script>  
        
      <script type="text/javascript">  
         /* 
         function over(trNode){ 
             trNode.className="over"; 
              
         } 
         */  
         var flag = true;  
         function sortTable(aNode){  
             var oTableNode = document.getElementById("dataTable");  
             var arrTrs = oTableNode.rows;  
               
             //思路：用一个新的容器来存放表格的行对象数组，并在新数组中进行排序,把排序后的每个元素(行对象)依次添加到表格对象中  
             //放到新容器arrTrs2中  
             var arrTrs2=[];  
             for(var x=1;x<arrTrs.length;x++){  
                 arrTrs2[x-1] = arrTrs[x];  
             }  
             //对容器arrTrs2中的元素进行排序  
             mySort(arrTrs2);  
               
             //把排序后的行对象重新加到表格中  
             if(flag){  
                 for(var x=0;x<arrTrs2.length;x++){  
                     arrTrs2[x].parentNode.appendChild(arrTrs2[x]);  
                 }  
                 aNode.innerHTML="年龄↓";  
             }else{  
                 for(var x=arrTrs2.length-1;x>=0;x--){  
                     arrTrs2[x].parentNode.appendChild(arrTrs2[x]);  
                 }  
                 aNode.innerHTML="年龄↑";  
             }  
             flag = !flag;  
             trColor();  
         }  
           
         function mySort(arr){  
             for(var x=0;x<arr.length-1;x++){  
                 for(var y=x+1;y<arr.length;y++){  
                     if(parseInt(arr[x].cells[1].innerText) > parseInt(arr[y].cells[1].innerText)){  
                         var temp = arr[x];  
                         arr[x] = arr[y];  
                         arr[y] = temp;  
                     }  
                 }  
             }  
         }  
           
      </script>  
        
   </head>  
     
   <body>  
       <table id="dataTable">  
          <tr>  
             <th>姓名</th> <th><a href="javascript:void(0)" οnclick="sortTable(this)">年龄</a></th> <th>地址</th>  
          </tr>  
         <tr>  
             <td>张三</td> <td>22</td> <td>湖南长沙</td>  
         </tr>  
         <tr>  
             <td>李四</td> <td>33</td> <td>湖南长沙</td>  
         </tr>  
         <tr>  
             <td>王五</td> <td>21</td> <td>湖南长沙</td>  
         </tr>  
         <tr>  
             <td>Jack</td> <td>20</td> <td>湖南长沙</td>  
         </tr>  
         <tr>  
             <td>Rose</td> <td>43</td> <td>湖南长沙</td>  
         </tr>  
         <tr>  
             <td>Jack</td> <td>53</td> <td>湖南长沙</td>  
         </tr>  
         <tr>  
             <td>Rose</td> <td>35</td> <td>湖南长沙</td>  
         </tr>  
         <tr>  
             <td>Jack</td> <td>13</td> <td>湖南长沙</td>  
         </tr>  
         <tr>  
             <td>Rose</td> <td>30</td> <td>湖南长沙</td>  
         </tr>  
       </table>  
   </body>  
     
 </html>  

夏小弥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript-网页编程-DHTML-表格创建/删除/设置/排序

、对表格的一些操作（创建，删除，设置颜色，排序等）1、创建表格1）通过DOM树模型，一层一层的建立表格 ------ 最底层的创建方式，费劲，但功能很强2）利用table中的现有的功能实现的注：1、表格的,标签和标签中间，其实还隐藏着一个标签----表格体，下面才是2、如果和之间有空格或换行(空格和换行看成文本节点)，则table的第一个孩子节点
复制链接

扫一扫