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 File类 根据官方文档理解
File有四个构造函数 public File(File dir,String name) 参数为File和String,File制定构造的新的File对象的路径 ...
- 基于Vue的数字输入框组件开发
1.概述 Vue组件开发的API:props.events和slots 2.组件代码 github地址:https://github.com/MengFangui/VueInputNumber 效果: ...
- 关于苹果开发证书失效的解决方式(2016年2月14日Failed to locate or generate matching signing assets)
前言: 从2月14日開始,上传程序的同学可能会遇到提示上传失败的提示. 而且打开自己的钥匙串,发现所有的证书所有都显示此证书签发者无效. Failed to locate or generate ma ...
- springmvc使用实体參数和ServletAPI
一. 实体參数 前面我们知道使用注解@RequestParam能够获得參数的值,那么如今提交一个表单怎么获得当中的值了.你能够说能够使用request.getParameter("" ...
- Centos 6.4 python 2.6 升级到 2.7一起的MySQLdb不能使用的解决问题
查看python的版本#python -V Python 2.6.6 1.下载Python-2.7.3#wget http://python.org/ftp/python/2.7.3/Python-2 ...
- discuz开发笔记
http://blog.csdn.net/tiangsu_php/article/details/7665125 http://www.discuz.net/thread-3225192-1-1.ht ...
- Actors编程模型
Actors模型(Actor model)首先是由Carl Hewitt在1973定义, 由Erlang OTP (Open Telecom Platform) 推广,其 消息传递更加符合面向对象的原 ...
- Android studio 使用心得(五)—代码混淆和破解apk
这篇文章等是跟大家分享一在Android studio 进行代码混淆配置.之前大家在eclipse上也弄过代码混淆配置,其实一样,大家可以把之前在eclipse上的配置文件直接拿过来用.不管是.cfg ...
- Objective-C中的类型转换
转自:http://blog.csdn.net/lonelyroamer/article/details/7711920 类型转换 表2-3列出了简单数据类型.示例和格式符. 表2-3 简单数据类型. ...
- java 容器结构
先来看下层次关系. 如图所示:图中,实线边框的是实现类,折线边框的是抽象类,而点线边框的是接口 Collection(接口)├──List(接口)│ ├──LinkedList(实现类)│ ├ ...