用JavaScript实现上下颠倒所有表格里的所有列内容：
function reversetable()
{
var TableSum=document.getElementsByTagName("table") //获取全部table
for(var flag=0;flag<TableSum.length;flag++)
{
var node=TableSum[flag]; //第flag个table
var child=node.getElementsByTagName("tr"); //第flag个table的所有tr
var newChild=new Array(); //定义数组用来保存td里的内容
for(var i=0;i<child.length;i++) //遍历tr
{
newChild[i]=new Array(); //用二维数组
var childcell=child[i].getElementsByTagName("td"); //获取第i个tr的所有td
for(var j=0;j<childcell.length;j++) //遍历td
newChild[i][j]=childcell[j].innerHTML; //将td里的内容保存
}
node.removeChild(node.childNodes[0]); //删除所有行
var header=node.createTHead(); //创建表头
for(var i=0;i<newChild.length;i++)
{
var headerrow=header.insertRow(i); //创建第i行
for(var j=0;j<newChild[i].length;j++)
{
var cell=headerrow.insertCell(j); //创建第i列
cell.appendChild(document.createTextNode(newChild[newChild.length-i-1][j])); //将保存的值保存到第i行第j列
}
}
}
}
{
var TableSum=document.getElementsByTagName("table") //获取全部table
for(var flag=0;flag<TableSum.length;flag++)
{
var node=TableSum[flag]; //第flag个table
var child=node.getElementsByTagName("tr"); //第flag个table的所有tr
var newChild=new Array(); //定义数组用来保存td里的内容
for(var i=0;i<child.length;i++) //遍历tr
{
newChild[i]=new Array(); //用二维数组
var childcell=child[i].getElementsByTagName("td"); //获取第i个tr的所有td
for(var j=0;j<childcell.length;j++) //遍历td
newChild[i][j]=childcell[j].innerHTML; //将td里的内容保存
}
node.removeChild(node.childNodes[0]); //删除所有行
var header=node.createTHead(); //创建表头
for(var i=0;i<newChild.length;i++)
{
var headerrow=header.insertRow(i); //创建第i行
for(var j=0;j<newChild[i].length;j++)
{
var cell=headerrow.insertCell(j); //创建第i列
cell.appendChild(document.createTextNode(newChild[newChild.length-i-1][j])); //将保存的值保存到第i行第j列
}
}
}
}
测试HTML页：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>reversetable</title></head><body><table width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td><td>test1</td> </tr> <tr> <td height="25">第二行</td><td>test2</td> </tr> <tr> <td height="25">第三行</td><td>test3</td> </tr> <tr> <td height="25">第四行</td><td>test4</td> </tr></table><table width="200" border="1" cellpadding="4" cellspacing="0"> <tr> <td height="25">第一行</td><td>test1</td> </tr> <tr> <td height="25">第二行</td><td>test2</td> </tr> <tr> <td height="25">第三行</td><td>test3</td> </tr> <tr> <td height="25">第四行</td><td>test4</td> </tr></table><br><input type="button" name="reverse" value="开始颠倒" onClick="reversetable()"></body></html>主要用到的属性、方法：
getElementsByTagName();
removeChild();
createTHead();
insertRow();
insertCell();
appendChild();
createTextNode();
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
