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 ...
随机推荐
- vue 仿ele 开发流程
技术栈: vue2 vuex vue-router axios webpack eslint better-scroll 1.安装插件 npm install vue-resource babel-r ...
- apache相关配置
PHP配置 php.ini-development:开发时的php.ini配置 php.ini-production:项目运行时的php.ini配置 复制php.ini-development文件到C ...
- 批量将代码中的 get_XXX 替换成 XXX
使用 sed 只需要一个命令: sed -s -i 's/set_\([A-Za-z0-9_]*\)/\1 = /g' ` find . -name '*.cs' | xargs grep -l se ...
- js实现页面元素随着内容的滚动而滚动
CreateTime--2017年9月4日16:55:06 Author:Marydon js实现页面元素随着内容的滚动而滚动 分析: CSS样式,使用绝对定位确定好页面元素在屏幕的位置(如:正中 ...
- Codeforces 276E(树状数组)
题意:一棵树有n个节点,1是根节点,根节点的子节点是单链,然后如今有两种操作0 v x d表示距离节点v为d的节点权值都加x,操作1 v问v节点的权值,初始节点权值都是0. 题解:看了别人的题解才会的 ...
- 织梦dedecms dede plus文件作用介绍及安全设置
一.安装设置 1.默认的后台模块中心有很多模块. 这里除了"友情链接"模块其他都可以删掉.在后台可以先卸载再删除. 2.如果是一开始就不想要的话,安装版plus目录下进行如下操作. ...
- 解决——CSS :before、:after ，当content使用中文时有时候会出现乱码
问题: 在进行页面开发时,经常会使用:before, :after伪元素创建一些小tips,但是在:before或:after的content属性使用中文的话,会导致某些浏览器上出现乱码. 例如我遇到 ...
- C语言初级链表（之有头节点的单向链表）
#define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stdlib.h> typedef struct No ...
- 新标准C++程序设计读书笔记_继承和多态
简单继承的例子: #include <iostream> #include <string> using namespace std; class CStudent { pri ...
- nyoj 740 “炫舞家“ST
“炫舞家“ST 时间限制:3000 ms | 内存限制:65535 KB 难度:3 描述 ST是一个酷爱炫舞的玩家.TA很喜欢玩QQ炫舞,因此TA也爱屋及乌的喜欢玩跳舞机(Dance Dance ...