[收藏]颠倒表格顺序的javascript范例代码

最新推荐文章于 2023-05-15 19:34:40 发布

caiyi0903

最新推荐文章于 2023-05-15 19:34:40 发布

阅读量2.2k

点赞数

分类专栏： Sencha EXTJS/Javascript 文章标签： javascript table html 文档 button border

本文链接：https://blog.csdn.net/caiyi0903/article/details/577528

版权

Sencha EXTJS/Javascript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

在HTML文档中，布局和定位常常通过表格<table>来实现。
因此，例子将演示操作表格内容，将表格的四个单元行顺序颠倒。
如果没有使用<tbody>标签，则<table>把全部的<tr>当做是属于一个子节点<tbody>，
所以我们采用数组缓存的方式，把行数据颠倒一下。
这个例子同时也演示了如何使用DOM创建表格单元行。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
function reverseTable() {
	var node = document.getElementsByTagName("table")[0]; //第一个表格
	var child = node.getElementsByTagName("tr"); //取得表格内的所有行
	var newChild = new Array(); //定义缓存数组，保存行内容
	for(var i=0;i<child.length;i++) {
		newChild[i] = child[i].firstChild.innerHTML; 
	}
	node.removeChild(node.childNodes[0]); //删除全部单元行
	var header = node.createTHead(); //新建表格行头
	for(var i=0;i<newChild.length;i++) {
		var headerrow = header.insertRow(i); //插入一个单元行
		var cell = headerrow.insertCell(0); //在单元行中插入一个单元格
		//在单元格中创建TextNode节点
		cell.appendChild(document.createTextNode(newChild[newChild.length-i-1]));
	}
}
</script>
</head>
<body>
<table width="200" border="1" cellpadding="4" cellspacing="0">
    <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>