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 ...
随机推荐
- Android获取前台进程的方法
概述 项目中很多场景交互非常依赖于客户端的前后景状态以及其他一些辅助信息上传,譬如当前新闻在前台(看到的是新闻界面)播放时,语音开启音乐应用,此时我们希望能看到音乐界面,并且音乐在播;而在导航应用在前 ...
- 无比强大！Python抓取cssmoban站点的模版并下载
Python实现抓取http://www.cssmoban.com/cssthemes站点的模版并下载 实现代码 # -*- coding: utf-8 -*- import urlparse imp ...
- Tomcat性能调整完整教程
Tomcat性能调整完整教程 发表于:2007-07-13来源:作者:点击数:526 标签: 一. 引言 性能测试与分析是软件 开发 过程中介于架构和调整的一个广泛并比较不容易理解的领域,更是一项较为 ...
- 《The Story of My Life》Introductiom - Historical and Literary Context - Education of the Deaf and Blind
At the time the Story of My Life was published, the idea of a disabled person as an active member of ...
- 网页会计系统 FrontAccounting
FrontAccounting (FA)是一个针对企业ERP供应链的网页会计系统.FA 允許多使用者.多語系和多國貨幣. FA允许多使用者.多语系和多国货币.FA接续OpenAccounting (O ...
- Drupal启动阶段之六：页面头信息
Drupal在本阶段为用户设置缓存头信息.Drupal不为验证用户缓存页面,每次请求时都是从新读取的. function _drupal_bootstrap_page_header() { boots ...
- 英特尔 Android* 开发者指南上的对等应用
简单介绍 当没有 Wi-Fi 訪问点或互联网訪问时,Android* 应用可能须要对等连接在两台或多台 Android* 设备之间建立连接. 比方,文件共享应用和多人游戏. 该功能可使用 NFC.蓝牙 ...
- 利用POI进行Excel的导出
需求:将用户的违约金信息导出为excel表格格式 步骤 1. 数据库中增加按钮的值(注意上级编号要和页面隐藏域中的相等) DZ内容(页面加载时根据SJBH查询数据库内容,读取DZ字段信息并加载样式及方 ...
- [1-1] 把时间当做朋友（李笑来）Chapter 1 【心智的力量】 摘录
今天开了读书笔记这一专题,主要是对自己今后读的书有一个小小的记录,也为解决自己读书多年的存在的一些习惯的问题. 打小就喜欢书,可能最早的书是家人买的看图识动物.还记得七八岁时见书摊上的书时赖着不走央求 ...
- docker中批量删除 tag为none的镜像
添加定时任务,批量删除tag 为none 的镜像 ,释放磁盘空间 [root@weifeng]:~# crontab -l */ * * * /usr/bin/docker rmi `docker ...