html table 上移下移
js操作表格操方法,增加,修改,删除，一行记录
随机选择行 添加一行 删除选定行 上移选定行 下移选定行 按第一列排序 按数据和排序
<!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>
html table 上移下移的更多相关文章
- table中实现数据上移下移效果
html 由于vue+Element项目中的table,没有开放的上移下移的api,但是能对数据操作,故思路为数组中的一条数据,再重新添加一条数据,办法有点笨,但是好歹也是实现了,望有好的办法的,请留 ...
- 05_jquery 操作table使tr(数据)整行上移下移
1:ajax请求数据到页面 function GetWorkSpaceList() { GetServerData("get", GetEnterpriseUrl() + &quo ...
- php修改排序，上移下移
php修改排序,上移下移 /** $UpDown //移动方向,up或down $table //表名 $id //当前移动的ID $id_col //ID字段的名称 $ ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- javaWeb上移下移（SpringMVC+Mabits+MySql）
文章已移至:https://blog.csdn.net/baidu_35468322/article/details/79643356 移动之前: 移动之后: 1.控制层 /** * 修改排序 * * ...
- JS移动li行数据，点击上移下移（是位置的互换，不是top的偏移量改变）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jqgrid 上移下移单元格
在表格中常常需要调整表格中数据的显示顺序,我用的是jqgrid,实现原理就是将表中的行数保存到数据库中,取数据时按行进行排序 1.上移,下移按钮 <a href="javascript ...
- wpf listbox 选中项 上移下移
原文:wpf listbox 选中项 上移下移 private void MoveUp_Click(object sender, RoutedEventArgs e) { ...
- vue 实现模块上移下移 实现排序
效果图 上移 下移 首先想到的是 数组的相互替换嘛 <template> <div> <div class="box" v-for="(it ...
随机推荐
- 关于Fragment的懒加载问题
为了达到界面效果,我们有时需要使用到TabLayout+ViewPager的方式来布局界面,然而ViewPager的adapter总是默认把与当前可见的fragment相邻的两个fragment给加载 ...
- HttpClient4.3教程 第二章 连接管理
2.1.持久连接 两个主机建立连接的过程是很复杂的一个过程,涉及到多个数据包的交换,并且也很耗时间.Http连接需要的三次握手开销很大,这一开销对于比较小的http消息来说更大.但是如果我们直接使用已 ...
- Hibernate的批量操作
在实际的操作中,会经常的遇到批量的操作,使用hibernate将 100条记录插入到数据库的一个很自然的做法可能是这样的 Session session = sessionFactory.openSe ...
- Hibernate 入门示例
版权声明:本文为博主原创文章,如需转载请标注转载地址 博客地址:http://www.cnblogs.com/caoyc/p/5593406.html 环境: myelipse2015+Hibern ...
- mysql中如何统计某字段里某个字符的个数
select * from order where length(order_num)-length(replace(order_num,'8','')) = 4
- Lintcode---线段树构造||
线段树是一棵二叉树,他的每个节点包含了两个额外的属性start和end用于表示该节点所代表的区间.start和end都是整数,并按照如下的方式赋值: 根节点的 start 和 end 由 build ...
- 远程调试 Weinre
什么是远程调试? 说白了,就是可以通过PC端[F12开发者工具]查看并调试移动端的页面内容,如html.css.js.Network资源等. 重要的事情说三遍:weinre所占有的端口不需要和监听页面 ...
- 安装inkscape for mac注意事项
今天为了安装inkscape for mac,搞了一下午.按以前的方法,先安最新的XQuartz,再安最新的inkscape,在运行inkscape前先打开XQuartz.但是发现不行了,inksca ...
- PHP的CURLOPT_POSTFIELDS参数使用数组和字符串的区别
手册上解释: CURLOPT_POSTFIELDS 全部数据使用HTTP协议中的"POST"操作来发送.要发送文件,在文件名前面加上@前缀并使用完整路径.这个参数可以通过urle ...
- 李洪强iOS开发OC[001]-NSLog函数的使用方法