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>
白色的一行为鼠标进入到改行的效果..比较难看- -!
