html tabl自动生成序列号,jQuery实现table中的tr上下移动并保持序号不变的实例代码...
jQueryMoveTr.html
代码如下:
jQuery-bhang
aaaaaaaaaa | @@@@@@@ | 注释1 | ||
bbbbbbbbbbbbb | ######### | 注释2 | ||
cccccccccccc | $$$$$$$$$$$$ | 注释3 | ||
ddddddddddddd | &&&&&&&&&&&&& | 注释4 | ||
eeeeeeeeeeeeee | *************** | 注释5 |
jquery-rlutil-1.6.2.js代码如下:
* 功能:使带有序号的table表格中的tr内容上下移动并保持序号不变
*
* 函数使用要求:
* 1、要求在使用此函数前必须先引用 jquery-1.6.2.js 文件
* 2、上移按钮的name属性必须是 btn1,下移按钮的name属性必须是 btn2
* 3、要有一个id=show_table_id的table元素,这个table元素里面放置n个tr套td的信息,其中有一个td的text是input框,input的value是序号值
* 4、要求所有text内容为序号的td的class属性为 td_num
*
* @param: obj为一个button的对象
* @param: table_self_id为table的id值
* @param: td_self_id为内容是input序号框的td的class的属性值
*/
/上移指令
function prevMoveTrCommand(obj, table_self_id, td_self_id){
*
//不带表头的写法
var $jqFirstTr = jQuery("#"+table_self_id+" tr:first-child");
//获得第一个tr的对象
var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();
//获得第一个tr里的input的value的序号
var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();
//获得本身tr的序号 带表头的写法
var $jqFirstTr = jQuery("#"+table_self_id+" tr:nth-child(2)");
/*获得第二个tr的对象*/
var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val();
/*获得第一个tr里的input的value的序号*/
var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val();
/*获得本身tr的序号*/
if(objVal == firstTrVal){
/*判断是否在把第一行向上移*/
return;
}else{
prevMoveTrOpra(obj, td_self_id);
/*调用上移操作方法*/
}
}
/*上移操作*/
function prevMoveTrOpra(obj, td_self_id){
var $jqObj = jQuery(obj).parent().parent().clone(); /*获得并复制本身tr的信息*/ var $jqSublObj = jQuery(obj).parent().parent().prev(); /*获得上一个tr的信息*/ $jqSublObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+" input:nth-child(1)").val())+1); /*把上一个tr序号加1*/ jQuery(obj).parent().parent().html("").append($jqSublObj.html()); /*把本身tr清空并插入上一个信息*/
$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())-1); /*把本身tr序号减1*/ $jqSublObj.html("").append($jqObj.html()); /*把上一个tr清空并插入临时保存的tr信息*/
$jqObj.remove(); /*删除复制的多余jQuery对象*/}
/*下移指令*/ function nextMoveTrCommand(obj, table_self_id, td_self_id){
var $jqLastTr = jQuery("#"+table_self_id+" tr:last-child"); /*获得最后一个tr的对象*/ var lastTrVal = $jqLastTr.find("."+td_self_id+" input:nth-child(1)").val(); /*获得最后一个tr的序号*/ var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val(); /*获得本身tr的序号*/ if(objVal == lastTrVal){ /*判断是否想把最后一行往下移*/ return;
}else{
nextMoveTrOpra(obj, td_self_id); /*调用下移操作方法*/ }}
/*下移操作*/ function nextMoveTrOpra(obj, td_self_id){
var $jqObj = jQuery(obj).parent().parent().clone(); /*获得并复制本身tr的信息*/ var $jqSiblObj = jQuery(obj).parent().parent().next(); /*获得下一个tr的信息*/ $jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val())-1); /*把下一个tr序号减1*/
jQuery(obj).parent().parent().html("").append($jqSiblObj.html()); /*把本身tr清空并插入下一个tr信息*/
$jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())+1); /*把本身tr序号加1*/
$jqSiblObj.html("").append($jqObj.html()); /*把下一个tr清空并插入临时保存的tr信息*/
$jqObj.remove(); /*删除复制的多余jQuery对象*/ }
jswension.html代码如下:
JavaScript拼接版
[color=green]/*οnclick=prevMoveTrCommand(this,'show_table_id','td_num'); 这个地方千万不要带空格,否则乱码*/[/color]
jQuery(document).ready(function(){
var str = "";
str += "
";
str += "
";
str += "
aaaaaaaaaa";
str += "
@@@@@@@";
str += "
";
str += "
";
str += "
注释1";
str += "
";
str += "
";
str += "
";
str += "
bbbbbbbbbbbbb";
str += "
#########";
str += "
";
str += "
";
str += "
注释2";
str += "
";
str += "
";
str += "
";
str += "
cccccccccccc";
str += "
$$$$$$$$$$$$";
str += "
";
str += "
";
str += "
注释3";
str += "
";
str += "
";
str += "
";
str += "
ddddddddddddd";
str += "
&&&&&&&&&&&&&";
str += "
";
str += "
";
str += "
注释4";
str += "
";
str += "
";
str += "
";
str += "
eeeeeeeeeeeeee";
str += "
***************";
str += "
";
str += "
";
str += "
注释5";
str += "
";
$("#show_table_id").html(str);
});
以上这篇jQuery实现table中的tr上下移动并保持序号不变的实例代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
html tabl自动生成序列号,jQuery实现table中的tr上下移动并保持序号不变的实例代码...相关推荐
- jQuery在table中追加tr和删除tr
jQuery在table中追加tr和删除tr 1. 追加tr jQuery添加新内容有以下四个方法: (1) append() - 在被选元素的结尾插入内容(效果如下图:) (2) prepend() ...
- jQuery遍历table中的tr td并获取td中的值
jQuery遍历table中的tr td并获取td中的值 $(function(){$("#tableId tr").find("td").each(funct ...
- html tabl自动生成序列号,Element-UI使用与爬坑集合
目录 Element-UI使用与爬坑集合 一.Element-UI各UI控件属性使用加不加冒号(:)整理 二.el-menu组件作为route-view时候,刷新页面后,默认active状态(defa ...
- html tabl自动生成序列号,如何为el-table组件添加序号
elemen-ui我想大家并不陌生了,是一个很优秀的前端vue组件,能过够帮大家很轻松的搭建一套前端脚手架页面,今天的分享很简单,只是为了给初次使用的小伙伴提供参考. 当我们想在 el-table 中 ...
- odoo12:自动生成序列号方法
为了我们插入数据的效率,我们会想到自动生成序列号.那么怎么生成预想的序列号呢?下面我们就来看看. 1.data/data.xml <?xml version="1.0" en ...
- jQuery 在Table中选择input之类的东西注意事项
jQuery 在Table中选择input之类的东西注意事项: 如果不在td标签中,是不能进行正确选择的: <table id="tblFormId"><tr&g ...
- html里table的遍历,js遍历table中的tr
js遍历table中的tr function tt(){ var table1=document.getElementById('table1'); //节点只支持getElementsByTagNa ...
- idea序列化自动生成_serialVersionUID在数据序列化中重要性
作用 用于判断序列化文件是否已经失效(过期). 序列化的时候会把这个ID写到文件里. 读的时候会把这个ID和代码里的ID比较,如果不一致,表示文件里的已经失效.(will result in an I ...
- doc自动生成html,java web应用中自动生成文章html页面的实现.doc
java web应用中自动生成文章html页面的实现 java web应用中自动生成文章html页面的实现 2009-11-09 00:24:15 标签:web开发,页面转换 [推送到技术圈] 版权声 ...
最新文章
- python input与返回值-python中使用input()函数获取用户输入值方式
- hibernate教程--一级缓存
- python实现阿里云域名绑定动态IP
- db2 replace函数的用法_SQL基础知识:常用字符处理函数
- 利用SQL中的递归返回多行数据的连接
- 关于Java你不知道的10件事
- TiDB 源码阅读系列文章(二十二)Hash Aggregation
- 女婿的行为,老丈人哪些不能管,哪些必须管,哪些可管可不管?
- 获得阿里巴巴编码规范技能认证
- mysql 性能剖析_MySQL服务器性能剖析(一)
- 漫画 | Redis常见面试问题
- 解决办法:Type safety: The expression of type List needs unchecked conversion to conform
- java设计模式之用王者荣耀打开观察者模式(附代码实例)每天一学设计模式
- 为什么我的淘宝店铺动态评分清零了?
- 揭秘刷百度权重那些不为人知的事情
- 与传统的物理服务器对比,云服务器有哪些优势
- GD32F303固件库开发(17)----内部Flash读写
- SPI读取NRF24L01
- LeetCode40 Combination Sum II 解析
- 【YOLO学习笔记——数据集】之一YOLO数据集制作2