代码入下:
<!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> | |