- 浏览: 584073 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (174)
- JBPM (3)
- WWF (0)
- JavaScript (11)
- J2EE (40)
- OperationSystem (11)
- 数据库 (12)
- CSS (1)
- Ajax (2)
- J2SE (30)
- Tools (10)
- 服务器中间件 (3)
- 异常 (0)
- Flex (5)
- jQuery (11)
- html (9)
- Ejb (1)
- HTML5 Shiv–让该死的IE系列支持HTML5吧 (1)
- Spring (9)
- Quartz (3)
- log4j (1)
- maven (1)
- cpdetector (1)
- JSON (1)
- log4jdbc (1)
- asm (8)
- FusionCharts (1)
- jqplot (1)
- highcharts (1)
- excanvas (1)
- html5 (1)
- jpcap介绍 (1)
- weblogic (3)
- URLURLClassLoader (0)
- URLClassLoader (1)
- ant (2)
- ivy (2)
- nexus (1)
- IT (0)
- LoadRunner (1)
- SCSS (1)
- ruby (1)
- webstorm (1)
- typescript (1)
- Jboss7 (1)
- wildfly (1)
- oracle (5)
- esb (0)
- dubbo (2)
- zookeeper (3)
- eclipse (1)
- Android (2)
- Studio (1)
- Google (1)
- 微信 (1)
- 企业号 (1)
- Linux (13)
- Oracle12c (1)
- Hadoop (1)
- InletexEMC (1)
- Windows (1)
- Netty (3)
- Marshalling (2)
- Protobuf (1)
- gcc (1)
- Git (1)
- GitLab (1)
- shell (2)
- java (3)
- Spring4 (1)
- hibernate4 (1)
- postgresql (1)
- ApacheServer (2)
- Tomcat (2)
- ApacheHttpServer (2)
- realvnc (1)
- redhat (7)
- vncviewer (1)
- LVS (4)
- LVS-DR (1)
- RedHat6.5 (5)
- LVS-NAT (1)
- LVS-IPTUNNEL (2)
- LVS-TUN (1)
- keepalived (2)
- yum (1)
- iso (1)
- VMware (1)
- redhat5 (1)
- ha (1)
- nginx (2)
- proguard (1)
- Mat (1)
- DTFJ (1)
- axis2 (1)
- web service (1)
- centos (1)
- random (1)
- urandom (1)
- apache (1)
- IBM (1)
- cve (1)
- 漏洞 (1)
- JDBC (1)
- DataSource (1)
- jdk (1)
- tuxedo (2)
- wtc (1)
最新评论
-
skying007:
好资料,谢谢分享给啊
FusionCharts在服务器端导出图片(J2EE版) -
cgnnzg:
大神好 可以发一份源码给我学习么 多谢了 978241085 ...
springmvc+dubbo+zookeeper -
jifengjianhao:
求源码:854606899@qq.com
springmvc+dubbo+zookeeper -
wdloyeu:
shihuan8@163.com邮箱网盘在哪,没找到。能给份源 ...
Java Socket长连接示例代码 -
huangshangyuanji:
求代码:45613032@qq.com
springmvc+dubbo+zookeeper
jQueryMoveTr.html代码如下:
jquery-rlutil-1.6.2.js代码如下:
jswension.html代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>jQuery-bhang</TITLE> <script type="text/javascript" src="jquery-1.6.2.js"></script> <script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script> </HEAD> <BODY> <table id="show_table_id" border="1"> <tr> <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="1" /></td> <td>aaaaaaaaaa</td> <td>@@@@@@@</td> <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td> <td>注释1</td> </tr> <tr> <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="2" /></td> <td>bbbbbbbbbbbbb</td> <td>#########</td> <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td> <td>注释2</td> </tr> <tr> <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="3" /></td> <td>cccccccccccc</td> <td>$$$$$$$$$$$$</td> <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td> <td>注释3</td> </tr> <tr> <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="4" /></td> <td>ddddddddddddd</td> <td>&&&&&&&&&&&&&</td> <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td> <td>注释4</td> </tr> <tr> <td class="td_num"><input type="text" name="td_num_tn" readonly="true" style="border:0px; width:10px;" value="5" /></td> <td>eeeeeeeeeeeeee</td> <td>***************</td> <td align="center"><input type="button" name="btn1" value="↑" onclick="prevMoveTrCommand(this, 'show_table_id', 'td_num');" /> <input type="button" name="btn2" value="↓" onclick="nextMoveTrCommand(this, 'show_table_id', 'td_num');" /></td> <td>注释5</td> </tr> </table> </BODY> </HTML>
jquery-rlutil-1.6.2.js代码如下:
[color=green]/* * 功能:使带有序号的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的属性值 */ [/color] [color=green]//上移指令[/color]function prevMoveTrCommand(obj, table_self_id, td_self_id){ [color=green]/* //不带表头的写法 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的序号 */[/color] [color=green]/*带表头的写法*/[/color] var $jqFirstTr = jQuery("#"+table_self_id+" tr:nth-child(2)"); [color=green]/*获得第二个tr的对象*/[/color] var firstTrVal = $jqFirstTr.find("."+td_self_id+" input:nth-child(1)").val(); [color=green]/*获得第一个tr里的input的value的序号*/[/color] var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val(); [color=green]/*获得本身tr的序号*/[/color] if(objVal == firstTrVal){ [color=green]/*判断是否在把第一行向上移*/[/color] return; }else{ prevMoveTrOpra(obj, td_self_id); [color=green] /*调用上移操作方法*/[/color] } } [color=green]/*上移操作*/[/color]function prevMoveTrOpra(obj, td_self_id){ var $jqObj = jQuery(obj).parent().parent().clone(); [color=green]/*获得并复制本身tr的信息*/[/color] var $jqSublObj = jQuery(obj).parent().parent().prev(); [color=green]/*获得上一个tr的信息*/[/color] $jqSublObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSublObj.find("."+td_self_id+" input:nth-child(1)").val())+1); [color=green] /*把上一个tr序号加1*/[/color] jQuery(obj).parent().parent().html("").append($jqSublObj.html()); [color=green]/*把本身tr清空并插入上一个信息*/[/color] $jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())-1); [color=green]/*把本身tr序号减1*/[/color] $jqSublObj.html("").append($jqObj.html()); [color=green]/*把上一个tr清空并插入临时保存的tr信息*/[/color] $jqObj.remove(); [color=green]/*删除复制的多余jQuery对象*/[/color]} [color=green]/*下移指令*/[/color]function nextMoveTrCommand(obj, table_self_id, td_self_id){ var $jqLastTr = jQuery("#"+table_self_id+" tr:last-child"); [color=green]/*获得最后一个tr的对象*/[/color] var lastTrVal = $jqLastTr.find("."+td_self_id+" input:nth-child(1)").val(); [color=green]/*获得最后一个tr的序号*/[/color] var objVal = jQuery(obj).parent().parent().find("."+td_self_id+" input:nth-child(1)").val(); [color=green]/*获得本身tr的序号*/[/color] if(objVal == lastTrVal){ [color=green]/*判断是否想把最后一行往下移*/[/color] return; }else{ nextMoveTrOpra(obj, td_self_id); [color=green]/*调用下移操作方法*/[/color] } } [color=green]/*下移操作*/[/color]function nextMoveTrOpra(obj, td_self_id){ var $jqObj = jQuery(obj).parent().parent().clone(); [color=green]/*获得并复制本身tr的信息*/[/color] var $jqSiblObj = jQuery(obj).parent().parent().next(); [color=green]/*获得下一个tr的信息*/[/color] $jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqSiblObj.find("."+td_self_id+" input:nth-child(1)").val())-1); [color=green]/*把下一个tr序号减1*/[/color] jQuery(obj).parent().parent().html("").append($jqSiblObj.html()); [color=green]/*把本身tr清空并插入下一个tr信息*/[/color] $jqObj.find("."+td_self_id+" input:nth-child(1)").val(Number($jqObj.find("."+td_self_id+" input:nth-child(1)").val())+1); [color=green]/*把本身tr序号加1*/[/color] $jqSiblObj.html("").append($jqObj.html()); [color=green]/*把下一个tr清空并插入临时保存的tr信息*/[/color] $jqObj.remove(); [color=green]/*删除复制的多余jQuery对象*/[/color]}
jswension.html代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE>JavaScript拼接版</TITLE> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <script type="text/javascript" src="jquery-1.6.2.js"></script> <script type="text/javascript" src="jquery-rlutil-1.6.2.js"></script> <script type="text/javascript"> [color=green]/*onclick=prevMoveTrCommand(this,'show_table_id','td_num'); 这个地方千万不要带空格,否则乱码*/[/color] jQuery(document).ready(function(){ var str = ""; str += "<tr>"; str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='1' /></td>"; str += "<td>aaaaaaaaaa</td>"; str += "<td>@@@@@@@</td>"; str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />"; str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>"; str += "<td>注释1</td>"; str += "</tr>"; str += "<tr>"; str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='2' /></td>"; str += "<td>bbbbbbbbbbbbb</td>"; str += "<td>#########</td>"; str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />"; str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>"; str += "<td>注释2</td>"; str += "</tr>"; str += "<tr>"; str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='3' /></td>"; str += "<td>cccccccccccc</td>"; str += "<td>$$$$$$$$$$$$</td>"; str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />"; str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>"; str += "<td>注释3</td>"; str += "</tr>"; str += "<tr>"; str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='4' /></td>"; str += "<td>ddddddddddddd</td>"; str += "<td>&&&&&&&&&&&&&</td>"; str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />"; str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>"; str += "<td>注释4</td>"; str += "</tr>"; str += "<tr>"; str += "<td class='td_num'><input type='text' name='td_num_tn' readonly='true' style='border:0px; width:10px;' value='5' /></td>"; str += "<td>eeeeeeeeeeeeee</td>"; str += "<td>***************</td>"; str += "<td align='center'><input type='button' name='btn1' value='↑' onclick=prevMoveTrCommand(this,'show_table_id','td_num'); />"; str += " <input type='button' name='btn2' value='↓' onclick=nextMoveTrCommand(this,'show_table_id','td_num'); /></td>"; str += "<td>注释5</td>"; str += "</tr>"; $("#show_table_id").html(str); }); </script> </HEAD> <BODY> <table id="show_table_id" border="1"></table> </BODY> </HTML>
- 罚没专用信息配置的序号排序功能.rar (63.6 KB)
- 下载次数: 233
发表评论
-
动态提交使用jQuery 完成ajax 文件下载
2016-10-05 13:46 894https://my.oschina.net/u/140962 ... -
JavaWeb发送信息到微信公众平台的企业号
2015-11-01 22:42 3811首先到微信公众平台申请微信企业号: https://qy.we ... -
form的submit与onsubmit的用法与区别
2015-10-14 11:21 6292submit与onsubmit 发生顺序:onsubmit ... -
html的form表单提交得不到参数问题
2014-07-25 16:13 1869今天同事问我他的form表单按submit方式提交,在Java ... -
让IE8支持HTML5及canvas功能
2014-07-24 16:41 2007http://code.google.com/p/explor ... -
highcharts导出图片到Excel和Pdf文件中
2014-07-24 16:17 2474http://www.hcharts.cn/ (Hig ... -
jqplot图表插件
2014-07-23 09:46 1342jqplot是基于jQuery的一款客户端画图插件。 http ... -
动态淡出表格行,鼠标悬浮提示框
2014-07-03 11:14 6352<html> <head> & ... -
js弹出层示例代码
2014-06-27 09:29 1010附件里是用js做的可运行的*.html文件。 鼠标单击弹出层 ... -
jquery判断360浏览器
2013-11-14 16:27 1841<!DOCTYPE HTML PUBLIC " ... -
HTML5
2012-08-22 09:19 1673HTML5能为我们做的事儿很多,最为可口的就是语义化标签 ... -
jQuery-autoComplete-1.8.22代码例子
2012-08-12 15:41 6636到官方下载jquery-1.7.2.js和jquery-ui- ... -
Lodop6.046 Web打印控件介绍
2011-11-14 12:35 1630http://mtsoftware.v053.gokao.ne ... -
jQuery.ui的相关资料
2011-06-22 18:09 1109jQuery.ui的下载地址:http://jqueryui. ... -
JavaScript和jQuery获取input框的绝对位置
2011-06-22 09:45 3007<!DOCTYPE html PUBLIC &quo ... -
两个DIV的相对位置(右上角)
2011-05-07 22:12 5497HTML代码如下: <html> <he ... -
jQuery弹出层
2011-05-07 21:03 4490jQueryPopup.html代码如下: <!DO ...
相关推荐
本教程将详细讲解如何利用jQuery实现表格内容的上下移动功能,以及随之变动的序号更新。 一、jQuery基础 jQuery通过提供简洁的API,使得JavaScript代码更易于编写和理解。其核心概念包括选择器(用于选取DOM元素)...
在网页开发中,jQuery 是一个广泛使用的 JavaScript 库,它极大地简化了 DOM 操作、事件处理、动画设计以及Ajax交互。在本示例中,我们将深入探讨如何使用jQuery来获取HTML表格的第一列的值。 首先,我们需要了解...
在给定的资源中,“原生js table表格自动排序效果”提供了一个无需依赖任何外部库(如jQuery或lodash)的解决方案。下面我们将详细探讨这个功能的实现原理和相关知识点。 首先,`index.html`文件是网页的结构部分,...
3. **行号自增**:在提供的代码中,使用jQuery实现了一个名为`number`的函数,它遍历所有`.numberClass`的元素并设置其内容为索引值加1。如果你不使用jQuery,可以改用原生JavaScript的`querySelectorAll`和`forEach...
在这个示例中,我们将探讨如何使用jQuery将HTML表格(table)中的数值转换为直观的进度条,以增强数据展示的效果。这个例子特别适用于处理由asp.net GridView控件生成的表格数据。 首先,我们需要了解HTML结构。在...
### jQuery动态操作表单示例【基于table表格】 #### 1....通过本文的介绍,读者应能理解如何使用jQuery来动态地操作基于table表格的表单,并应用于实际开发中,以提升Web应用的交互性和用户体验。
总之,jQuery 插件 TreeTable 提供了一种简便的方式,将传统的表格转变为具有树形结构的表格,便于组织和展示层次化数据,同时保持了良好的性能和多样的视觉风格。通过灵活的配置选项,开发者可以轻松地适应各种项目...
在JavaScript中实现表格数据排序和分页功能是Web开发中常见的需求,特别是在处理大量数据时。这个场景中,我们讨论的是如何用JavaScript实现一个表格的动态数据排序,并且支持分页,主要涉及到以下知识点: 1. **...
`fixHelperModified`函数用于创建一个辅助帮助器元素,它在拖动过程中保持与原始元素相同的比例和宽度。当用户开始拖动表格行时,这个辅助元素会跟随鼠标移动。 `updateIndex`函数在拖放操作停止时被调用,它的作用...
在本文中,我们将深入探讨如何使用jQuery来实现一个基本的购物车功能。购物车系统是电商网站不可或缺的一部分,它允许用户选择并管理他们想要购买的商品。以下是一个简单的jQuery实现,涵盖了购物车的基本操作,包括...
在成功获取到服务器返回的数据后,jQuery选择器被用于选取页面中特定的元素,本例中是ID为tableAjax的div元素。随后,通过$.html()方法将构建好的tableStr字符串添加到这个div中,完成动态表格的显示。 4. Ajax与...
jQuery1.2 API 中文版折叠展开折叠全部展开全部 英文说明 核心jQuery 核心函数 jQuery(expression,[context]) jQuery(expression,[context]) 这个函数接收一个包含 CSS 选择器的字符串,然后用这个字符串去匹配一组...
在网页开发中,jQuery是一个非常流行的JavaScript库,它简化了DOM操作、事件处理、动画设计以及Ajax交互。本文将详细讲解如何使用jQuery实现表格行和列的动态添加与删除功能,这对于创建交互式数据展示页面至关重要...
在本文中,我们将探讨如何使用Django和JavaScript(JS)来实现表格中的动态序号功能。这个功能在数据展示时非常实用,特别是当表格数据有增删操作时,序号可以自动更新,保持顺序。 首先,我们需要一个HTML模板,...
本文将详细介绍如何使用jQuery来实现列表拖拽排序,并确保后台数据同步更新。 #### 一、前端实现 ##### JSP页面元素 在JSP页面中,我们可以通过以下步骤来实现列表拖拽功能: 1. **定义可拖拽元素**:首先需要...
- 在增加新行时,从隐藏的模板表格`#tab11`中克隆一行,并将其添加到实际使用的表格`#dynamicTable`中。 - 更新行内的序号字段(即`<input type="text" name="NO">`中的值)。 - 设置最大允许显示的行数,以避免...