1.动态创建表格与删除指定行/列:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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的值为nullif(tableNode==null)alert("表格还未创建");else{var deleteRow=document.getElementsByName("deleteRow")[0].value; if(deleteRow>0&&deleteRow<=tableNode.rows.length)tableNode.deleteRow(deleteRow-1);//如果不指定index,删除rows集合中最后一个elsealert("删除行行不存在");}}/*删除指定列*/function deleteColumn(){ var tableNode=document.getElementById("newTable");//如果未创建tableNode的值为nullif(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);elsealert("删除列不存在");}}</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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/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";elsetrNodes[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>
白色的一行为鼠标进入到改行的效果..比较难看- -!
