JQuery实现表格行的上移、下移、删除、增加
<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript" src="/Test/js/jquery.min.js"></script>
<script type="text/javascript">
//删除
function del(t){
$(t).parent().parent().remove();
} //上移
function up(t){
var i=$(t).parent().parent().index();//当前行的id
if(i>1){//不是表头，也不是第一行，则可以上移
var tem0=$(t).parent().parent().html();
var tem1=$(t).parent().parent().prev().html();
$(t).parent().parent().prev().html(tem0);
$(t).parent().parent().html(tem1);
}
}
//下移
function down(t){
var l=$("#MyTB tr").length;//总行数
var i=$(t).parent().parent().index();//当前行的id
if(i<l-1){//不是最后一行，则可以下移
var tem0=$(t).parent().parent().html();
var tem1=$(t).parent().parent().next().html();
$(t).parent().parent().next().html(tem0);
$(t).parent().parent().html(tem1);
}
}
function add(t){
var tem0=$(t).parent().parent().html();
$(t).parent().parent().append("<tr>"+tem0+"</tr>");
}
</script>
</head>
<body>
<table id="MyTB">
<tr>
<td>xxxxxxxx</td>
<td>xxxxxxxx</td>
<td>xxxxxxxx</td>
<td>xxxxxxxx</td>
<td>
</td>
</tr>
<tr>
<td>11111111</td>
<td>11111111</td>
<td>11111111</td>
<td>11111111</td>
<td>
<input type="button" value="上" onclick="up(this)" />
<input type="button" value="下" onclick="down(this)" />
<input type="button" value="删" onclick="del(this)" />
<input type="button" value="加" onclick="add(this)" />
</td>
</tr>
<tr>
<td>22222222</td>
<td>22222222</td>
<td>22222222</td>
<td>22222222</td>
<td>
<input type="button" value="上" onclick="up(this)" />
<input type="button" value="下" onclick="down(this)" />
<input type="button" value="删" onclick="del(this)" />
<input type="button" value="加" onclick="add(this)" />
</td>
</tr>
<tr>
<td>33333333</td>
<td>33333333</td>
<td>33333333</td>
<td>33333333</td>
<td>
<input type="button" value="上" onclick="up(this)" />
<input type="button" value="下" onclick="down(this)" />
<input type="button" value="删" onclick="del(this)" />
<input type="button" value="加" onclick="add(this)" />
</td>
</tr>
<tr>
<td>44444444</td>
<td>44444444</td>
<td>44444444</td>
<td>44444444</td>
<td>
<input type="button" value="上" onclick="up(this)" />
<input type="button" value="下" onclick="down(this)" />
<input type="button" value="删" onclick="del(this)" />
<input type="button" value="加" onclick="add(this)" />
</td>
</tr>
<tr>
<td>55555555</td>
<td>55555555</td>
<td>55555555</td>
<td>55555555</td>
<td>
<input type="button" value="上" onclick="up(this)" />
<input type="button" value="下" onclick="down(this)" />
<input type="button" value="删" onclick="del(this)" />
<input type="button" value="加" onclick="add(this)" />
</td>
</tr>
</table>
</body>
</html>
JQuery实现表格行的上移、下移、删除、增加的更多相关文章
- jquery为表格行添加上下移动画效果
为项目列表项添加上下移动动画.首先想使用jquery animate来做到这一点.但我用的是table和tr作为列表和列表项,但jquery动画方法不支持table里的tr(Animations ar ...
- jQuery实现表格行上移下移和置顶
jQuery实现表格行上移下移和置顶 我们在操作列表数据的时候,需要将数据行排列顺序进行调整,如上移和下移行,将行数据置顶等,这些操作都可以在前端通过点击按钮来完成,并且伴随着简单的动态效果,轻松实现 ...
- jQuery实现表格行的动态增加与删除(改进版)
之前写过一个简单的利用jQuery实现表格行的动态增加与删除的例子,有些人评论说"如果表格中是input元素,那么删除后的东西都将自动替换,这样应该是有问题的,建议楼主改进!",故 ...
- jquery更改表格行顺序实例
使用jquery写的更改表格行顺序的小功能 表格部分: 复制代码代码如下: <table class="table" id="test_table"> ...
- jquery 行交换 上移 下移
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- jQuery实现表格行的动态增加与删除
删除之前删除2行后: 1<script> 8 $(document).ready(function(){ 9 //<tr/>居中 10 $("#tab tr" ...
- jQuery实现表格行的动态增加与删除 序号 从 1开始排列
<table id="tab" border="1" width="60%" align="center" sty ...
- jquery实现表格行的动态增加和删除
$("#Addmaterial").click(function () {//Addmaterial是增加按钮的ID $("#tab tr").attr(&qu ...
- 使用jquery扩展表格行合并方法探究
1.前言 最近项目中用到一个表格中对于相同内容的数据进行行合并的需求,本来想从网上找个现成的,省的自己再造轮子.于是就开始谷歌了...不过在搜索的过程中,发现找到的工具类很多都有一个前提,就是该表格中 ...
随机推荐
- 【模板】插头dp
题目描述 题解: 插头$dp$中经典的回路问题. 首先了解一下插头. 一个格子,上下左右四条边对应四个插头.就像这样: 四个插头. 一个完整的哈密顿回路,经过的格子一定用且仅用了两个插头. 所以所有被 ...
- 配置c3p0-config.xml数据库连接池，jdbcurl配置项报错Type The reference to entity "useUnicode" must end with the ';' delimiter.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE xml> <c3p0-confi ...
- LEFT JOIN结果集可能变大。。。。。
SELECT A.*,B.* FROM A LEFT JOIN B ON A.ID = B.ID
- 单链表 C语言 学习记录
概念 链接方式存储 链接方式存储的线性表简称为链表(Linked List). 链表的具体存储表示为: 用一组任意的存储单元来存放线性表的结点(这组存储单元既可以是连续的,也可以是不连续的). 链表中 ...
- js中trim函数的简单实现
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <hea ...
- Python学习之-- IO 操作
阻塞IO / 非阻塞IO /IO多路复用 / 异步IO 说明:同步IO包含(阻塞IO / 非阻塞IO /IO多路复用),因为他们有个共同特性就是都需要内核态到用户态的一个等待. 基本概念解释,环境限定 ...
- POJ 1797 【一种叫做最大生成树的很有趣的贪心】【也可以用dij的变形思想~】
题意: 给一个无向图,找1到n所有的路中每条路最小权值的最大值! 屌丝一开始的思想是利用dij的变形~ 但是==屌丝忘记了更新dis数组~结果TLE无数次... 说正经的~dij的变形思想是这样的if ...
- 2017CodeM初赛A场
A.最长树链(loj6159) 分析: 对于每个质因数,取出所有是它倍数的点组成一个树,然后找最长路径 每个数操作次数是其质因数的个数 所以总的复杂度不超过O(nlogA) B.二分图染色(loj61 ...
- 使用微软的 ilasm 和 ildasm 对. net程序进行编译和反编译
为了保证示例的完整性,请先准备好一个 c#写的 exe 程序,或者可以使用我提供的 exe 程序也可以(很简单,为了测试这里仅生成了一个带按钮的 winform,单击按钮提示弹窗) Test WinF ...
- 使用datatables实现后台分页功能，减轻前端渲染压力
注意不同版本,参数名字及参数内容存在差异,具体可以参考https://datatables.net/upgrade/1.10-convert#Options 控制页面显示的参数:https://dat ...