js操作表格操方法,增加,修改,删除，一行记录

最新推荐文章于 2024-05-16 16:52:30 发布

牧马人xxx

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量1.9k

点赞数 1

分类专栏： web前端控件的验证

本文链接：https://blog.csdn.net/u010078133/article/details/10445505

版权

web前端控件的验证专栏收录该内容

28 篇文章 0 订阅

订阅专栏

代码入下：

	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
	<title>js操作表格操方法,增加,修改,删除，一行记录</title>
	<script type="text/javascript">
	var mytable = null;
	window.onload = function () {
	mytable = new CTable("tbl", 10); //随机创建10行表格
	}
	Array.prototype.each = function (f) { //数组的遍历
	for (var i = 0; i < this.length; i++) f(this[i], i, this)
	}
	function $A(arrayLike) { //数值的填充
	for (var i = 0, ret = []; i < arrayLike.length; i++) ret.push(arrayLike[i]);
	return ret
	}
	Function.prototype.bind = function () { //数据的绑定
	var __method = this, args = $A(arguments), object = args.shift();
	return function () {
	return __method.apply(object, args.concat($A(arguments)));
	}
	}
	function CTable(id, rows) {
	this.tbl = typeof (id) == "string" ? document.getElementById(id) : id;
	if (rows && /^\d+$/.test(rows)) this.addrows(rows) //为表格添加行数
	}
	CTable.prototype = {
	addrows: function (n) { //随机添加n行
	new Array(n).each(this.add.bind(this))
	},
	add: function () { //添加1行
	var self = this;
	var tr = self.tbl.insertRow(-1), td1 = tr.insertCell(-1), td2 = tr.insertCell(-1), td3 = tr.insertCell(-1);
	var chkbox = document.createElement("INPUT")
	chkbox.type = "checkbox"
	chkbox.onclick = self.highlight.bind(self)
	td1.appendChild(chkbox) //第一列添加复选框
	td1.setAttribute("width", "35")
	td2.innerHTML = Math.ceil(Math.random() * 99) //第二列的随机填充值
	td3.innerHTML = Math.ceil(Math.random() * 99) //第三列的随机填充值
	},
	del: function () { //删除所选行
	var self = this
	$A(self.tbl.rows).each(function (tr) { if (self.getChkBox(tr).checked) tr.parentNode.removeChild(tr) })
	},
	up: function () { //上移所选行
	var self = this
	var upOne = function (tr) { //上移1行
	if (tr.rowIndex > 0) {
	self.swapTr(tr, self.tbl.rows[tr.rowIndex - 1])
	self.getChkBox(tr).checked = true
	}
	}
	var arr = $A(self.tbl.rows).reverse() //反选
	if (arr.length > 0 && self.getChkBox(arr[arr.length - 1]).checked) {
	for (var i = arr.length - 1; i >= 0; i--) {
	if (self.getChkBox(arr[i]).checked) {
	arr.pop()
	} else {
	break
	}
	}
	}
	arr.reverse().each(function (tr) { if (self.getChkBox(tr).checked) upOne(tr) });
	},
	down: function () { //下移所选行
	var self = this
	var downOne = function (tr) {
	if (tr.rowIndex < self.tbl.rows.length - 1) {
	self.swapTr(tr, self.tbl.rows[tr.rowIndex + 1]);
	self.getChkBox(tr).checked = true;
	}
	}
	var arr = $A(self.tbl.rows)
	if (arr.length > 0 && self.getChkBox(arr[arr.length - 1]).checked) {
	for (var i = arr.length - 1; i >= 0; i--) {
	if (self.getChkBox(arr[i]).checked) {
	arr.pop()
	} else {
	break
	}
	}
	}
	arr.reverse().each(function (tr) { if (self.getChkBox(tr).checked) downOne(tr) });
	},
	sort: function () { //排序
	var self = this, order = arguments[0];
	var sortBy = function (a, b) {
	if (typeof (order) == "number") { //数字,则按数字指示的列排序
	return Number(a.cells[order].innerHTML) >= Number(b.cells[order].innerHTML) ? 1 : -1; //转化为数字类型比较大小
	} else if (typeof (order) == "function") { //返回结果排序
	return order(a, b);
	} else {
	return 1;
	}
	}
	$A(self.tbl.rows).sort(sortBy).each(function (x) {
	var checkStatus = self.getChkBox(x).checked;
	self.tbl.firstChild.appendChild(x);
	if (checkStatus) self.getChkBox(x).checked = checkStatus;
	});
	},
	rnd: function () { //随即选择几行数据
	var self = this, selmax = 0, tbl = self.tbl;
	if (tbl.rows.length) {
	selmax = Math.max(Math.ceil(tbl.rows.length / 4), 1); //选择的行数不超过tr数的1/4
	$A(tbl.rows).each(function (x) {
	self.getChkBox(x).checked = false;
	self.restoreBgColor(x)
	})
	} else {
	return alert("无数据可以选")
	}
	new Array(selmax).each(function () {
	var tr = tbl.rows[Math.floor(Math.random() * tbl.rows.length)]
	self.getChkBox(tr).checked = true;
	self.highlight({ target: self.getChkBox(tr) })
	})
	},
	highlight: function () { //设置行的背景色
	var self = this;
	var evt = arguments[0] \|\| window.event
	var chkbox = evt.srcElement \|\| evt.target
	var tr = chkbox.parentNode.parentNode
	chkbox.checked ? self.setBgColor(tr) : self.restoreBgColor(tr)
	},
	swapTr: function (tr1, tr2) { //交换tr1和tr2的位置
	var target = (tr1.rowIndex < tr2.rowIndex) ? tr2.nextSibling : tr2;
	var tBody = tr1.parentNode
	tBody.replaceChild(tr2, tr1);
	tBody.insertBefore(tr1, target);
	},
	getChkBox: function (tr) { //从tr得到 checkbox对象
	return tr.cells[0].firstChild
	},
	restoreBgColor: function (tr) {
	tr.style.backgroundColor = "#ffffff"
	},
	setBgColor: function (tr) { //设置背景色
	tr.style.backgroundColor = "#c0c0c0"
	}
	}

	function f(a, b) {
	var sumRow = function (row) { return Number(row.cells[1].innerHTML) + Number(row.cells[2].innerHTML) };
	return sumRow(a) > sumRow(b) ? 1 : -1;
	}
	</script>
	</head>
	<body>
	<button onclick="javascript:mytable.rnd()">
	随机选择行</button>
	<button onclick="javascript:mytable.add()">
	添加一行</button>
	<button onclick="javascript:mytable.del()">
	删除选定行</button>
	<button onclick="javascript:mytable.up()">
	上移选定行</button>
	<button onclick="javascript:mytable.down()">
	下移选定行</button>
	<button onclick="javascript:mytable.sort(1)">
	按第一列排序</button>
	<button onclick="javascript:mytable.sort(f)">
	按数据和排序</button>
	<br />
	<br />
	<table width="100%">
	<tr>
	<td valign="top">
	<table border id="tbl" width="80%">
	</table>
	</td>
	</tr>
	</table>
	</body>
	</html>

实现结果如下：

牧马人xxx

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js操作表格操方法,增加,修改,删除，一行记录

代码入下： xmlns="http://www.w3.org/1999/xhtml"> js操作表格操方法,增加,修改,删除，一行记录 type="text/javascript"> var mytable = null; window.onload = function (
复制链接

扫一扫