zoukankan      html  css  js  c++  java

  • DHTML3(表格动态创建,删除行/列,表格行排序,行颜色交替高亮显示)

    1.动态创建表格与删除指定行/列:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="CSS/Dtab.css" />
<script type="text/javascript">
  /*方法一:比较繁琐的方式通过document对象操作*/
  function createTab(){
    //创建节点
    var tableNode=document.createElement("Table");
    var tbodyNode=document.createElement("tbody");
    var trNode=document.createElement("tr");
    var tdNode=document.createElement("td");
    var textNode=document.createTextNode("单元格一");
    //指定节点之间关系
    tableNode.appendChild(tbodyNode);
    tbodyNode.appendChild(trNode);
    trNode.appendChild(tdNode);
    tdNode.appendChild(textNode);
    document.getElementsByTagName("div")[0].appendChild(tableNode);
  }

 /*方法二:利用table,tr对象中的方法*/
 function createTab2(){
  var tableNode=document.createElement("Table");
  var tableRow=document.getElementsByName("tableRow")[0].value;
  var tableColumn=document.getElementsByName("tableColumn")[0].value;
  var trNode,tdNode;
  for(var row=1;row<=tableRow;++row){
     trNode=tableNode.insertRow();//表格中插入一行,存放到table对象rows集合中
    for(var column=1;column<=tableColumn;++column){
       tdNode=trNode.insertCell();//行中插入一个单元格,
                                   //存放到tr对象cells(一行单元格集合)集合中     
                                   //table对象中的cells集合是表格中单元格集合
      tdNode.innerHTML=
           "<font color='gray'>"+row+","+column+"</font>";
                                      //innerHtml属性可以让浏览器解析html         
                                      //标签,区分innerText(纯文本)
     }
    
   }
   event.srcElement.disabled=true;//按钮不可用,只允许创建一次
   document.getElementsByTagName("div")[0].appendChild(tableNode); 
   tableNode.id="newTable";//以上执行成功为该表格指定一个id
  }
 
 /*删除指定行*/
 function deleteRow(){
  var tableNode=document.getElementById("newTable");//如果未创建tableNode的值为null
  if(tableNode==null)
    alert("表格还未创建");
  else{
    var deleteRow=document.getElementsByName("deleteRow")[0].value;        
    if(deleteRow>0&&deleteRow<=tableNode.rows.length)
       tableNode.deleteRow(deleteRow-1);//如果不指定index,删除rows集合中最后一个
    else
      alert("删除行行不存在");
   }
 }
 /*删除指定列*/
  function deleteColumn(){ 
   var tableNode=document.getElementById("newTable");//如果未创建tableNode的值为null
   if(tableNode==null)
    alert("表格还未创建");
   else{
     var deleteColumn=document.getElementsByName("deleteColumn")[0].value;
     if(deleteColumn>0&&deleteColumn<=tableNode.rows[0].cells.length)
       for(var line=0;line<tableNode.rows.length;++line)
          tableNode.rows(line).deleteCell(deleteColumn-1);
     else
      alert("删除列不存在");
    
   }
  }
</script>
<title>动态创建表格</title>
</head>

<body>
  行:<input type="text" name="tableRow" /><br/>
  列:<input type="text" name="tableColumn" /><br/>
  删除指定行<input type="text" name="deleteRow" /><br/>
  删除指定列<input type="text" name="deleteColumn" /><br/>
  <br/>
  <br/>
  <input type="button" value="创建表格" onclick="createTab2()"/>
  <input type="button" value="删除行" onclick="deleteRow()"/>
   <input type="button" value="删除列" onclick="deleteColumn()"/>
  <br/>
  <br/>
  <div>
   
  </div>
</body>
</html>

    动态创建表格

    该例子的一些细节测试:

      //tr,td索引测试: (在创建完表格,可以添加到上面JS中测试)
        trNode=tableNode.insertRow(2);//IE10:行列均从0开始指定的索引值为新插入行的索引:
                                       //例如:4行3列的 表格
                                      //新插入的行的index=2,如果不指定默认-1,会向当前表格末尾一行插入
                                      //指定的索引<=指定行(例如:你不能指定1行,插入新行index=2)
       
        tdNode=trNode.insertCell();//不指定向当前单元格末尾插入和指定的-1效果相同
        tdNode.innerHTML="索引0";
       
        tdNode=trNode.insertCell(-1);
        tdNode.innerHTML="索引1";
       
        tdNode=trNode.insertCell(2);
        tdNode.innerHTML="索引2"; //最终结果该单元格的index为指定的index(2)      
       
        alert(tableNode.rows(3).cells(3).innerHTML);//行与列的index从0开始,那么取到4行4列单元格内容

    2.表格中的排序:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>排序</title>
<link type="text/css" rel="stylesheet" href="CSS/TableSort.css" />
<script type="text/javascript">
/*方法一:行的单元格进行逐个交换*/
 function tabSort(){
  var tableNode=document.getElementById("tabID");
  var rowArr=tableNode.rows;
  bubbleSort(rowArr); 
 }
var flag=true;//点击升序,再次点击降序
 /*对指定单元格进行冒泡排序,同时完成交换行*/
function bubbleSort(rowArr){
 if(flag){
  for(var i=1;i<rowArr.length-1;++i)
    for(var j=1;j<rowArr.length-i;++j)
      if(parseInt(rowArr[j].cells[1].innerText)>parseInt(rowArr[j+1].cells[1].innerText))
                    //获取的为String需要转换为->int
       swapCells(rowArr,j,j+1);
  flag=false;
    
 }
 else{
   reverseOrder(rowArr);
   flag=true;
 }
}
 /*逆序*/
 function reverseOrder(rowArr){
   for(var start=1,end=rowArr.length-1;start<end;++start,--end)    
       swapCells(rowArr,start,end);
 
 }

/*x,y两行的所有单元格交换数据*/
 function swapCells(rowArr,x,y){
     var temp;
     for(var i=0;i<rowArr[0].cells.length;++i){
            temp=rowArr[x].cells[i].innerText;
            rowArr[x].cells[i].innerText=rowArr[y].cells[i].innerText;
            rowArr[y].cells[i].innerText=temp;
     }
 }   
</script>
</head>

<body>
 <table id="tabID"><tr>
    <th>姓名</th>
    <th><a href="javascript:void(0)" onclick="tabSort2()">年龄</a></th>
   <th>籍贯</th>
  </tr><tr>
    <td>张三</td>
    <td>20</td>
    <td>上海</td>
  </tr><tr>
    <td>李四</td>
    <td>10</td>
    <td>北京</td>
  </tr><tr>
    <td>马六</td>
    <td>5</td>
    <td>杭州</td>
  </tr><tr>
    <td>周七</td>
    <td>30</td>
    <td>福建</td>
  </tr><tr>
    <td>孙八</td>
    <td>60</td>
    <td>大连</td>
  </tr><tr>
    <td>徐风</td>
    <td>40</td>
    <td>北京</td>
  </tr></table>

</body>
</html>
<script type="text/javascript">
 /*方法二:将行对象引用存储到临时容器(Array)中,
 对其排序,然后再通过tbody.appendChild方法对行对象的顺序进行调整*/
 var flag=true;
 function tabSort2(){
   var tableNode=document.getElementById("tabID");
   var tbodyNode=tableNode.getElementsByTagName("tbody")[0];
  
   var rowArr=new Array();
   for(var i=1;i<tableNode.rows.length;++i)
     rowArr[i-1]=tableNode.rows[i];
   selectSort(rowArr);

 
   if(flag){
     for(var i=0;i<rowArr.length;++i)
       tbodyNode.appendChild(rowArr[i]);
     flag=false;
   }
   else{
     for(var i=rowArr.length-1;i>=0;--i)
        tbodyNode.appendChild(rowArr[i]);
     flag=true;
   }
     
    
 }

 /*选择排序*/
 function selectSort(rowArr){
     for(var i=0;i<rowArr.length-1;++i)
      for(var j=i+1;j<rowArr.length;++j)
         if(parseInt(rowArr[i].cells[1].innerText)>parseInt(rowArr[j].cells[1].innerText))
             swapRow(rowArr,i,j);
  }
 /*行对象引用进行交换*/
 function swapRow(rowArr,x,y){
        var temp;
     temp=rowArr[x];
     rowArr[x]=rowArr[y];
     rowArr[y]=temp;
 }
</script>

    表格排序

    该例子涉及到一些细节:

    注意:
    1.默认的tbody的位置
    alert(tableNode.getElementsByTagName("tbody").length);//1
    alert(tableNode.getElementsByTagName("tr")[2].parentNode.nodeName);//tbody
    alert(tableNode.getElementsByTagName("tr")[3].parentNode.nodeName);//tbody
    说明默认的1个tbody标签结构:
    <tbody>
       <tr></tr>
       <tr></tr>
       ....
    </tbody>
    2.之所以用一个rowArr=new Array()来存放rows中引用来操作rowArr,而不直接
    操作rows,因为如果tbodyNode.appendChild(rows[i])后,会改变rows集合的rows[i]
    引用指向的对象.

    3.表格的行颜色交替以及高亮显示某行:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link type="text/css" rel="stylesheet" href="CSS/TableSort.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>行颜色交替/动态注册事件</title>
<style type="text/css">
 .first{
     background-color:#993;
 }
 .second{
     background-color:#099;
 }
 .over{
     background-color:#FFF;
 }
</style>
<script type="text/javascript">
  var oldClassName;
  window.onload=function(){//页面加载完成后触发该事件
      var trNodes=
       document.getElementById("tabID").getElementsByTagName("tr");
      for(var i=1;i<trNodes.length;++i){
        if(i%2==0)//奇偶交替上色
           trNodes[i].className="first";
        else
          trNodes[i].className="second";
        
        trNodes[i].onmouseover=function(){//在tr对象上注册一个事件
                                           //事件属性指向一个匿名函数对象
            oldClassName=this.className//记录原有的样式
            this.className="over";//这里的this指向trNodes[i]
        }
        trNodes[i].onmouseout=function(){
             this.className=oldClassName;
        }
     }
  }
</script>
</head>

<body>
 <table id="tabID">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
   <th>籍贯</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>20</td>
    <td>上海</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>10</td>
    <td>北京</td>
  </tr>
  <tr>
    <td>马六</td>
    <td>5</td>
    <td>杭州</td>
  </tr>
  <tr>
    <td>周七</td>
    <td>30</td>
    <td>福建</td>
  </tr>
  <tr>
    <td>孙八</td>
    <td>60</td>
    <td>大连</td>
  </tr>
  <tr>
    <td>徐风</td>
    <td>40</td>
    <td>北京</td>
  </tr>
</table>
</body>
</html>

    image

    白色的一行为鼠标进入到改行的效果..比较难看- -!
  • 相关阅读:
    C++实现双缓冲
    [python]初探socket
    HTTP 状态代码表示什么意思？
    今天安装了麒麟系统
    初学python类
    python 如何在一个for循环中遍历两个列表
    python中xrange和range的异同
    再学python类（终结篇）
    常见浏览器兼容问题、盒模型2种模式以及css hack知识讲解
    原生JS实现瀑布流
  • 原文地址：https://www.cnblogs.com/yiqiu2324/p/3285922.html
Copyright © 2011-2022 走看看