📄 sample4_2.htm
字号:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function reverseTable() {
var table_node = document.getElementById("table1"); //第一个表格
var child = table_node.getElementsByTagName("tr"); //取得表格内的所有行
var newChild = new Array(); //定义缓存数组，保存行内容
for(var i=0;i<child.length;i++) {
newChild[i] = child[i].firstChild.innerHTML;
}
/*1.直接交换每个节点中的innerHTML中的内容
var j=0;
for(var i=child.length-1;i>=0;i--) {
child[i].firstChild.innerHTML=newChild[j++];
}*/
/*/2。删除原来的table，重新建立行内，并且插入参数
table_node.removeChild(table_node.childNodes[0]); //删除全部单元行，也就是删除<table>和<tr>之间的<tbody>节点
var header = table_node.createTHead(); //新建表格行头
for(var i=0;i<newChild.length;i++) {
var headerrow = header.insertRow(i); //插入一个单元行,（）内的参数表示，在当前节点内，第i行进行插入
var cell = headerrow.insertCell(0); //在单元行中插入一个单元格
//在单元格中创建TextNode节点
cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));
}*/
//*3。定位节点，删除该节点，将删除的节点添加到新的父节点后面.
var tbody_node = table_node.firstChild;//获得table节点的子节点，tbody
var tr_node = tbody_node.childNodes;//获得tbody的所有子节点，tr
for(i=tr_node.length-1;i>=0;i--){
var c = tbody_node.removeChild(tr_node[i]);
tbody_node.appendChild(c);
}
}
</script>
</head>
<body>
<table width="200" border="1" cellpadding="4" cellspacing="0" id="table1">
<tr>
<td height="25">第一行</td>
</tr>
<tr>
<td height="25">第二行</td>
</tr>
<tr>
<td height="25">第三行</td>
</tr>
<tr>
<td height="25">第四行</td>
</tr>
</table>
<br>
<input type="button" name="reverse" value="开始颠倒" onClick="reverseTable()">
</body>
</html>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -