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 ...
随机推荐
- 使用WinScp连接远程服务器和传输文件
早在3月份,我就使用到了WinScp,WinSCP是一个Windows环境下使用SSH的开源图形化SFTP客户端.同时支持SCP协议. 它的主要功能就是在本地与远程计算机间安全的复制文件..WinSc ...
- HDU 5296 Annoying problem
Annoying problem Time Limit: 16000/8000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others ...
- 批量将代码中的 get_XXX 替换成 XXX
使用 sed 只需要一个命令: sed -s -i 's/set_\([A-Za-z0-9_]*\)/\1 = /g' ` find . -name '*.cs' | xargs grep -l se ...
- jumpserver v0.5.0 创建用户和管理机器
用户管理-创建用户 data 用户详情 如下 创建用户组 data 资产列表添加资产 jumpserver 的 root 公钥需保持到 后端服务器的 authorized_keys 里, 然后测 ...
- HTML5&CSS3初学者指南
介绍 网络时代已经到来.现在对人们来说,每天上网冲浪已经成为一种最为常见的行为. 一个典型的网页是由文本.图像和链接组成的.除去内容上的差异,不同网站的网页也具有不同的外观和感受,以实现在网络上建立自 ...
- jQuery 树型菜单插件(Treeview)
jQuery Treeview 提供了一个无序灵活的可折叠的树形菜单.试用于一些菜单的导航,支持基于 cookie 的持久性菜单
- openssl 创建证书的总结和注意事项
1.该文章从网上看了好多博客,并经过实践形成.环境为ubuntu12和ubuntu14 "========================================大纲提要和注意事项= ...
- Freeswitch中文用户手册(第四章 SIP)----2
通过 B2BUA 呼叫 在真实世界中,bob 和 alice 肯定要经常改变位置,那么它们的 SIP 地址也会相应改变,并且,如果他们之中有一个或两个处于 NAT 的网络中时,直接通信就更困难了.所以 ...
- [Android] 通过Menu实现图片怀旧、浮雕、模糊、光照和素描效果
因为随手拍项目想做成类似于美图秀秀那种底部有一排Menu实现不同效果的功能,这里先简介怎样通过Menu实现打开相冊中的图片.怀旧效果.浮雕效果.光照效果和素描效果.后面可能会讲述怎样通过Pop ...
- phoenix查询缓慢问题
现象:phoenix刚建表时查找很快,随着数据导入越来越多,查询越来越缓慢,执行explain这个表的计划都需要好几秒,但在hbase shell里查询很快 问题定位:这个是由于system.stat ...