动态增加，删除表格行并按照表格列排序

迷南。 2022-08-07 14:47 312阅读 0赞

接着[上一篇博文][Link 1]，解决上一篇博文最后遗留的瑕疵，同时，给表格列添加了排序功能。

解决掉的问题

1 乱码的问题

2 删除方法更加简便，省去获取父节点id的代码

3 点击第一行的add按钮后，下行table行变宽问题

<html>
    	<head>
    		<title>Table</title>
    		<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    		<style>
    			table thead tr th {
    				text-align : center,
    				font-weight : bold
    			}
    			
    		</style>
    	</head>
    	<body>
    		<table id="tb1" border="1">
    			<thead>
    				<tr>
    					<th width="150px" οnclick="sortTable()" style="cursor:pointer">First Name</th>
    					<th width="150px">Last Name</th>
    					<th width="130px"> </th>
    				</tr>
    			<thead>
    			<tbody id="tb">
    				<tr id="1st">
    					<td width="150px"><input name="firstName" value="张" /></td>
    					<td width="150px"><input name="firstName" value="三" ></td>
    					
    					<td width="130px"><input type="button" value="Add" οnclick="add()"> <input type="button" value="Del" οnclick="del(this)"></td>
    				</tr>
    			</tbody>
    		</table>
    	</body>
    </html>
    <script>
    	function add() {
    		// 创建table 行标签tr
    		var trObj = document.createElement("tr");
    		// 设置行内容
    		trObj.innerHTML = "<td width='150px'><input name='firstName'/></td><td width='150px'>"
    			+ "<input name='lastName'/></td><td width='130px'><input type='button' value='Add' οnclick='add()'> "
    			+ "<input type='button' value='Del' οnclick='del(this)'></td>";
    		// 将行内容添加到表格中
    		document.getElementById("tb").appendChild(trObj);
    	}
    
    	function del(obj) {
    		// 直接删除当前对象的父节点的父节点
    		document.getElementById("tb").removeChild(obj.parentNode.parentNode);
    	}
    	
    	function compareTRs(oTR1, oTR2) {
    		// 获取行中的需要比较的firstName列的值
    		var sValue1 = oTR1.firstElementChild.firstElementChild.value;
    		var sValue2 = oTR2.firstElementChild.firstElementChild.value;
    		// 进行比较
    		return sValue1.localeCompare(sValue2);
    	}
    	
    	function sortTable(){
    		// 获取表格
    		var oTable = document.getElementById("tb1");
    		// 获取表格中tBody主体域
    		var oTBody = oTable.tBodies[0];
    		// 获取oTBody域中行集合
    		var colDataRows = oTBody.rows;
    		// 新建行数组，用于存放行内容
    		var aTRs = new Array;
    		
    		// 将oTBody中的行内容添加到aTRs中
    		for (var i=0; i < colDataRows.length; i++) {
    			aTRs[i] = colDataRows[i];
    		}
    		
    		// 若oTable的sortCol 属性为空，对数组进行反转，否则进行排序
    		if (oTable.sortCol) {
    			aTRs.reverse();
    		} else {
    			aTRs.sort(compareTRs);
    		}
    
    		// 创建代码片段，存放排序后的行数据
    		var oFragment = document.createDocumentFragment();
    		for (var i=0; i < aTRs.length; i++) {
    			oFragment.appendChild(aTRs[i]);
    		}
    
    		// 将存放有排序后行数据的代码片段添加到表格主体oTBody上
    		oTBody.appendChild(oFragment);
    		
    		// 设置排序标识
    		oTable.sortCol = true;
    	}
    </script>

[Link 1]: http://blog.csdn.net/magi1201/article/details/45065653