（js）表格正逆序排列

最新推荐文章于 2022-03-20 15:43:50 发布

数星星的小贝壳

最新推荐文章于 2022-03-20 15:43:50 发布

阅读量1.5k

点赞数

分类专栏：编程练习 JavaScript HTML CSS 文章标签：表格排列百度

本文链接：https://blog.csdn.net/leledexixi/article/details/54855362

版权

JavaScript 同时被 3 个专栏收录

22 篇文章 0 订阅

订阅专栏

CSS

7 篇文章 0 订阅

订阅专栏

编程练习

6 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title>表格正逆序排列</title>
	<meta charset="utf-8">
	<style type="text/css">
		table{
			width:400px;
			height:200px;
			border:1px solid #000;
			border-collapse:collapse;
			position:relative;/*这里有没有position达到的效果都一样*/
		}
		th,td{
			width:25%;
			height:20%;
			border:1px solid #000;
		}
		th{background-color:grey;}
	</style>
</head>
<body>
<table id="table"> <!--id的取名可以与标签名相同 -->
	<thead>
		<tr>
			<th>姓名</th>
			<th>力量</th>
			<th>敏捷</th>
			<th>智力</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>d德鲁伊</td>
			<td>17</td>
			<td>24</td>
			<td>13</td>
		</tr>
		<tr>
			<td>y月之骑士</td>
			<td>15</td>
			<td>22</td>
			<td>16</td>
		</tr>
		<tr>
			<td>z众神之王</td>
			<td>19</td>
			<td>15</td>
			<td>20</td>
		</tr>
		<tr>
			<td>l流浪剑客</td>
			<td>23</td>
			<td>15</td>
			<td>14</td>
		</tr>
	</tbody>
</table>

	<script type="text/javascript">
	var table = document.getElementById("table");
		//变量的取名可以与html中标签名相同，是Id而不是ID
	var th = table.getElementsByTagName("th");
		//取得标题  table.getElementByTagName与document.效果是一样的，为了更好的扩展性，这里用table.
	var tb = table.getElementsByTagName("tbody")[0];
	var tbTr = tb.getElementsByTagName("tr");
		//取得表格中的每一行。因为后面需要一行行的复制
		//getElementById 的Element没有s, getElementsbyTagName的Elements有s

function sortTable(_i){//使用_i是为了区别ith[_i].onclick = function(){
//只有点击后才执行以下内容var selectCol=[]; //把选定的列存入此数组中,存的是内容var copytr=[];
//把需要排列的表格数据复制到此数组中，存的是节点for(var j=0; j<tbTr.length; j++){selectCol.push(tbTr[j].getElementsByTagName("td")[_i].innerText);copytr.push(tbTr[j].cloneNode(true));
//cloneNode() 方法克隆所有属性以及它们的值。}//排序if(!isSort[_i]){isSort[_i]=true;var t=parseInt(selectCol[0]) || selectCol[0];
//有可能是字符串型的数字if(typeof(t)=='number'){ 
//判断为数字还是字符串,typeof的of为小写,selectCol.sort(function(a,b){return(a-b)});}else{selectCol.sort();}
//并不是按照拼音排序}else{isSort[_i]=false;selectCol.reverse();}console.log(selectCol);//清空原tbvar tbTrlength=tbTr.length;
//必须要这一行，因为tbTr.length会随着删除而改变for(var k=0;k<tbTrlength;k++){tb.removeChild(tbTr[0]);
//总共要删除tbTr.length-1行，删除一行少一行，所以每次删的都是【0】行}console.log(tb);//重新给tb添加排序好的内容for(var x=0;x<selectCol.length;x++){for(var y=0;y<copytr.length;y++){if(selectCol[x]==copytr[y].getElementsByTagName("td")[_i].innerHTML){tb.appendChild(copytr[y]);}}} }}var isSort=[];for(var
 i=0; i<th.length; i++){isSort[i]=false; //设置标志，用来判断是正序还是逆序排列sortTable(i);
//调用sortTable}</script></body></html>

数星星的小贝壳

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
（js）表格正逆序排列

表格正逆序排列 table{ width:400px; height:200px; border:1px solid #000; border-collapse:collapse; position:relative;/*这里有没有position达到的效果都一样*/ } th,td{ width:25%; height:20%;
复制链接

扫一扫

专栏目录