JS动态操作表格

最新推荐文章于 2022-04-13 15:08:41 发布

爱上学习啊

最新推荐文章于 2022-04-13 15:08:41 发布

阅读量1.5k

点赞数

分类专栏： Web Desgin 文章标签：表格

本文链接：https://blog.csdn.net/woblog/article/details/10035487

版权

Web Desgin 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、表格操作实例

Html代码：

<body>
<input type="text" name="row" /><br />
<input type="text" name="col" /><br />
<input type="button" name="crtTab" value="创建表格" οnclick="crtTab()"/><br />
<div id="id"></div><br />
<input type="text" name="rNum" /> <input type="button" name="delrow" value="删除行" οnclick="delRow()" /><br />
<input type="text" name="cNum" /> <input type="button" name="delcell" value="删除列"  οnclick="delCell()"/>
</body>

Js代码：

<script type="text/javascript">
//创建表格
function crtTab() {
	//获取用户输入
	var row = document.getElementsByName("row")[0].value;
	var col = document.getElementsByName("col")[0].value;
	if(row >= 1 && col >= 1) {
	
		//创建表格
		var tab = document.createElement("table");
		tab.setAttribute("id","tabid");
		
		for(var x=1;x<=row;x++) {
			var tr = tab.insertRow();
				for(var y=1;y<=col;y++) {
					var td = tr.insertCell();
					td.innerHTML=y+"--"+x;
			}	
		}
		var div = document.getElementById("id");
		div.appendChild(tab);
		document.getElementsByName("crtTab")[0].disabled=true;
	} else {
		alert("输入错误");
		return ;	
	}
}


//删除虛
function delRow() {
	//获取用户输入
	var row = document.getElementsByName("rNum")[0].value;
	
	//获取表格对象
	var tab = document.getElementById("tabid");
	if(row >= 1 && row < tab.rows.length + 1) {
		tab.deleteRow(row-1);
	} else {
		alert("输入错误");
		return ;
	}
}

//删除列
function delCell() {
	//获取用户输入
	var cell = document.getElementsByName("cNum")[0].value;
	
	//获取表格对象
	var tab = document.getElementById("tabid");	
	if(tab == null) {
		alert("没有表格可删除");
		return ;
	}
	
	var tr = tab.rows;
	if(cell >= 1 && cell <= tr[0].cells.length) {
		for(var x=0;x<tr.length;x++) {
			tr[x].deleteCell(cell-1);
		}
	} else {
		alert("输入错误");
		return ;
	}
}
</script>

二、对表格中的数据排序

样式代码：

<style type="text/css">
table{
	border-collapse:collapse;
	text-align:center;}
table,td {
	border:1px solid red;
	width:600px;}
table tr:first-child {
	font-weight:bold;}
table a,a:visited{
	color:#000;}
</style>

Js代码：
<script type="text/javascript">
function mySort() {
	//将所有的数据存到数组中，对数组中的数据排序，然后在添加到表格中
	var tabs = document.getElementById("tab");
	
	var arr=[];
	var trs = tabs.rows;
	for(var i=1;i<trs.length;i++) {
			arr[i-1]=trs[i];
	}
	
	//排序
	sorts(arr);
	
	//将排序好的数据从新添加到表格中
	for(var i=0;i<arr.length;i++) {
			tabs.appendChild(arr[i]);
	}
	
}
var flag = true;
function sorts(arr){
	if(flag) {
		flag = false;
		for(var i=0;i<arr.length-1;i++) {
			for(var j=i+1;j<arr.length;j++) {
				if(parseInt(arr[i].cells[1].innerHTML) > parseInt(arr[j].cells[1].innerHTML)) {
					var temp = arr[i];
					arr[i] = arr[j];
					arr[j]=temp;
				}
			}	
		}
	} else {
		flag = true;
		for(var i=0;i<arr.length-1;i++) {
			for(var j=i+1;j<arr.length;j++) {
				if(parseInt(arr[i].cells[1].innerHTML) < parseInt(arr[j].cells[1].innerHTML)) {
					var temp = arr[i];
					arr[i] = arr[j];
					arr[j]=temp;
				}
			}	
		}
	}
}
</script>

Html代码：

<body>
<table id="tab">
	<tr>
  	<td>姓名</td>
    <td><a href="javascript:void(0)" οnclick="mySort()">年龄</a></td>
    <td>地址</td>
  </tr>
	<tr>
  	<td>张三</td>
    <td>12</td>
    <td>北京</td>
  </tr>
  <tr>
  	<td>李四</td>
    <td>34</td>
    <td>上海</td>
  </tr>
  <tr>
  	<td>王二</td>
    <td>32</td>
    <td>南京</td>
  </tr>
  <tr>
  	<td>赵八</td>
    <td>22</td>
    <td>四川</td>
  </tr>
</table>
</body>