动态上移或下移 table表中的 td列

最新推荐文章于 2023-03-22 16:11:49 发布

原创最新推荐文章于 2023-03-22 16:11:49 发布 · 228 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JavaScript #HTML #ViewUI

web前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种使用JavaScript来实现HTML表格中行的上下移动的方法。通过点击每行后的上移或下移链接，可以调整表格行的位置。此功能适用于需要对表格数据进行排序或重新排列的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>JS控制HTMLDOM表格行上下移动</title>
<style type="text/css">
<!--
td  { text-align:center;font-size:12px;padding:3px;}

www.111cn.cn
-->
</style>
</head>
<body>
<table id="table1" bordercolor="#000000" width="200" border="1">
    <tbody>
        <tr>
            <td width="25%">1</td>
            <td width="25%">11</td>
   <!--使用javascript:void(0)是为了能够传递this参数到事件处理程序-->
            <td width="25%"><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td width="25%"><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>22</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>33</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>44</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>55</td>
            <td><a href="javascript:void(0)" onclick="moveUp(this)">上移</a></td>
            <td><a href="javascript:void(0)" onclick="moveDown(this)">下移</a></td>
        </tr>
    </tbody>
</table>
</body>
</html>

<script language="JavaScript" type="text/javascript">
<!--
	function cleanWhitespace(element) {
	 //遍历element的子结点
	 for (var i = 0; i < element.childNodes.length; i++) {
	  var node = element.childNodes[i];
	  //判断是否是空白文本结点，如果是，则删除该结点
	  if (node.nodeType == 3 && !/S/.test(node.nodeValue)) 
	  node.parentNode.removeChild(node);
	 }
	}
	//获得表格对象
	var _table=document.getElementById("table1");
	cleanWhitespace(_table);
	//使表格行上移，接收参数为链接对象
	function moveUp(_a){
	 //通过链接对象获取表格行的引用
	 var _row=_a.parentNode.parentNode;
	 //如果不是第一行，则与上一行交换顺序
	 if(_row.previousSibling)swapNode(_row,_row.previousSibling);
	}
	//使表格行下移，接收参数为链接对象
	function moveDown(_a){
	 //通过链接对象获取表格行的引用
	 var _row=_a.parentNode.parentNode;
	 //如果不是最后一行，则与下一行交换顺序
	 if(_row.nextSibling)swapNode(_row,_row.nextSibling);
	}
	//定义通用的函数交换两个结点的位置
	function swapNode(node1,node2){
	 //获取父结点
	 var _parent=node1.parentNode;
	 //获取两个结点的相对位置
	 var _t1=node1.nextSibling;
	 var _t2=node2.nextSibling;
	 //将node2插入到原来node1的位置
	 if(_t1)_parent.insertBefore(node2,_t1);
	 else _parent.appendChild(node2);
	 //将node1插入到原来node2的位置
	 if(_t2)_parent.insertBefore(node1,_t2);
	 else _parent.appendChild(node1);
	}
//-->
</script>