- 浏览: 3465840 次
- 性别:
- 来自: China
文章分类
- 全部博客 (536)
- ajax (1)
- Algorithm (14)
- Android (40)
- CSS/HTML... (2)
- defy (3)
- DesignPattern (2)
- dorado (0)
- Drools (6)
- English/日本語 (7)
- Flex (2)
- Framework (0)
- Google (3)
- hibernate (13)
- homework (3)
- HTML5 (0)
- IDE (29)
- java (45)
- javaee (7)
- Javascript (14)
- java组件 (5)
- jQuery (4)
- jsp (8)
- jsf (2)
- Linux (2)
- lucene (0)
- mysql (6)
- news (3)
- Oracle (8)
- other (4)
- PHP (5)
- Python (0)
- Software Engineering (3)
- spring (7)
- struts1.x (14)
- struts2.x (14)
- strolling in cloud (1)
- subject:javaEnhance (20)
- Tomcat (7)
- validator (3)
- 学习·方法·心得 (8)
- .NET (2)
- vba (6)
- groovy (5)
- grails (2)
- SWT (0)
- big data (1)
- perl (1)
- objective-c (50)
- product (1)
- mac (7)
- ios (188)
- ios-phone (2)
- ios-system (15)
- ios-network (5)
- ios-file (4)
- ios-db (1)
- ios-media (3)
- ios-ui (27)
- ios-openSource (6)
- ios-animation (5)
- ios-drawing (7)
- c (2)
- ios-app (2)
- ios-course (15)
- ios-runtime (14)
- ios-code (8)
- ios-thread (8)
- ios-LBS (2)
- ios-issue (1)
- ios-design (2)
- Jailbreak (2)
- cocos2d (0)
- swift (16)
- ios-framework (4)
- apple watch (4)
- ios-web (1)
- react native (3)
- TVOS (1)
- OpenGL (1)
最新评论
-
xiaobinggg:
...
Session机制详解 -
菜鸟学生会:
Drools规则工作流引擎开发教程网盘地址:http://pa ...
Drools入门-----------环境搭建,分析Helloworld -
wangyudong:
不是很好用,不支持自动化测试RESTful API,也不支持自 ...
Simple REST Client POST使用方法 -
Paul0523:
很棒的一篇文章,感谢楼主分享
Session机制详解 -
啸笑天:
获取原型对象的三种方法<script>functi ...
复习JavaScript面向对象技术
环境:struts2-2.2.1,jquery-1.4.4.min.js,eclipse-jee-helios-SR1-win32,access,
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Insert title here</title> <style type="text/css"> #tb .td { text-align: center; font-weight: bold; background-color: #6699FF; color: #FFFFFF; border: 1px solid #000; } </style> <script type="text/javascript" src="/erpweb/jquery/jquery-1.4.4.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("#tb tr").eq(2).hide(); var i = 0; $("#BtAdd").click(function() { var tr = $("#tb tr").eq(2).clone(true);// tr.find("td").get(0).innerHTML = ++i; tr.show(); tr.appendTo("#tb"); }); $("#BtDel").click(function() { $("#tb tr:gt(2)").each(function() { if ($(this).find("#CK").attr("checked") == true) {// $(this).remove(); } }); i = 0; $("#tb tr:gt(2)").each(function() { $(this).find("td").get(0).innerHTML = ++i;// }); $("#CKA").attr("checked", false);// }); $("#CKA").click(function() { $("#tb tr:gt(2)").each(function() { $(this).find("#CK").attr("checked",$("#CKA").attr("checked")); }); }); $("#nan").click(function() { // $(this).next().next().eq(0).attr("checked")==true?$(this).next().next().eq(0).attr("checked",false):$(this).next().next().eq(0).attr("checked",true);//IE6 // $(this).next().eq(0).attr("checked")==true?$(this).next().eq(0).attr("checked",false):$(this).next().eq(0).attr("checked",true);//firefox3 $(this).nextAll("#nv").attr("checked")==true?$(this).nextAll("#nv").attr("checked",false):$(this).nextAll("#nv").attr("checked",true); }); $("#nv").click(function() { //$(this).prev().prev().eq(0).attr("checked")==true?$(this).prev().prev().eq(0).attr("checked",false):$(this).prev().prev().eq(0).attr("checked",true);//IE6 //$(this).prev().prev().eq(0).attr("checked")==true?$(this).prev().prev().eq(0).attr("checked",false):$(this).prev().prev().eq(0).attr("checked",true);////firefox3 $(this).prevAll("#nan").attr("checked")==true?$(this).prevAll("#nan").attr("checked",false):$(this).prevAll("#nan").attr("checked",true); }); }); </script> </head> <body> <s:actionerror /> <br /> <center> <s:form id="form1" action="/add"> <div> <table id="tb" style="border: 1px solid #000;"> <tr> <td colspan="7" style="text-align: right"><input id="BtAdd" type="button" value="添加" /> <input id="BtDel" type="button" value="删除" /> <input id="BtDel" type="submit" " value="注册" /> </td> </tr> <tr> <td class="td" style="width: 25px;"></td> <td class="td" style="width: 59px;"><input id="CKA" name="CKA" type="checkbox" />删除</td> <td class="td" style="width: 160px;">EMPID</td> <td class="td" style="width: 160px;">NAME</td> <td class="td" style="width: 160px;">PASSWORD</td> <td class="td" style="width: 80px;">SEX</td> <tr> <td style="text-align: center"></td> <td style="text-align: center"><input id="CK" type="checkbox" name="CK" /></td> <td style="text-align: center"><input id="empid" type="text" name="empid" /></td> <td style="text-align: center"><input id="name" type="text" name="name" /></td> <td style="text-align: center"><input id="password" type="password" name="password" /></td> <td style="text-align: center"><input id="nan" type="checkbox" name="sex" value="男" checked="true" >男</input> <input id="nv" type="checkbox" name="sex" value="女" >女</input></td> <!--<td style="text-align: center"><input id="nan" type="radio" name="sex" value="男" checked="true" >男</input> <input id="nv" type="radio" name="sex" value="女" >女</input></td> --> </tr> </table> </div> </s:form> </center> </body> </html>
第二个<tr>就是用来增加行时的副本。
radio问题:
最后男女用单选项时(代码的红色处),增加行后,犹豫他们的name都是sex,所以当你选择时就只能选择所有行的一个。所以我换成了checkbox。
浏览器兼容问题:
当换成checkbox时(代码的蓝色),为了实现男和女必选一个时又写了上面蓝色的jquery代码,主要实现前后相邻节点访问。
刚开始用的是:
// $(this).next().eq(0).attr("checked")==true?$(this).next().eq(0).attr("checked",false):$(this).next().eq(0).attr("checked",true);//firefox3
但发现只有firefox,opera可以用,ie6不好用!后来想了想是不是中将“空白”当成一个子元素处理了(以前在李刚的疯狂ajax中访问相邻<li>看到过这个毛病),于是换成了:
// $(this).next().next().eq(0).attr("checked")==true?$(this).next().next().eq(0).attr("checked",false):$(this).next().next().eq(0).attr("checked",true);//IE6
结果和预料的一样,这个只能IE6用。
最后写了个兼容的代码,用nextAll找所有相邻的就可以兼容了:
$(this).nextAll("#nv").attr("checked")==true?$(this).nextAll("#nv").attr("checked",false):$(this).nextAll("#nv").attr("checked",true);
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
附:http://googledave.iteye.com/blog/459702 的实现
CheckBox单选
Java代码
- http://www.cnblogs.com/mextb1860/archive/2008/04/11/1147841.html
方法一
Html代码
- <BODY>
- <input type="checkbox" name="cbox" value="cbox1" onClick="chooseOne(this);">checkBox1
- <input type="checkbox" name="cbox" value="cbox2" onClick="chooseOne(this);">checkBox2
- <input type="checkbox" name="cbox" value="cbox3" onClick="chooseOne(this);">checkBox3
- <input type="checkbox" name="cbox" value="cbox4" onClick="chooseOne(this);">checkBox4
- </BODY>
- <script>
- //chooseOne()函式,參數為觸發該函式的元素本身
- function chooseOne(cb){
- //先取得同name的chekcBox的集合物件
- var obj = document.getElementsByName("cbox");
- for (i=0; i<obj.length; i++){
- //判斷obj集合中的i元素是否為cb,若否則表示未被點選
- if (obj[i]!=cb) obj[i].checked = false;
- //若是 但原先未被勾選 則變成勾選;反之 則變為未勾選
- //else obj[i].checked = cb.checked;
- //若要至少勾選一個的話,則把上面那行else拿掉,換用下面那行
- else obj[i].checked = true;
- }
- }
- </script>
方法二
Html代码
- <BODY>
- <div id="mydiv">
- <input type="checkbox" name="cbox1" value="cbox1" onClick="chooseOne(this);">checkBox1
- <input type="checkbox" name="cbox2" value="cbox2" onClick="chooseOne(this);">checkBox2
- <input type="checkbox" name="cbox3" value="cbox3" onClick="chooseOne(this);">checkBox3
- <input type="checkbox" name="cbox4" value="cbox4" onClick="chooseOne(this);">checkBox4
- </div>
- </BODY>
- <script>
- //chooseOne()函式,參數為觸發該函式的元素本身
- function chooseOne(cb) {
- //先取得Div元素
- var obj = document.getElementById("mydiv");
- ///判斷obj中的子元素i是否為cb,若否則表示未被點選
- for (i=0; i<obj.children.length; i++){
- if (obj.children[i]!=cb) obj.children[i].checked = false;
- //若是 但原先未被勾選 則變成勾選;反之 則變為未勾選
- else obj.children[i].checked = cb.checked;
- //若要至少勾選一個的話,則把上面那行else拿掉,換用下面那行
- //else obj.children[i].checked = true;
- }
- }
- </script>
- erpweb.rar (4.6 MB)
- 下载次数: 74
发表评论
-
jQuery code
2012-02-26 23:04 1370m -
解决jquery和其他库的冲突
2010-10-30 19:07 2007在jQuery库中,几乎所有的插件都被限制在他的命名空间里。通 ... -
jQuery练习
2010-10-30 14:59 01:导航菜单弹出二级菜单 2:用户名校验效果:没有输入时提示 ... -
jQuery随笔
2010-10-30 11:47 01 each(callback)方法以遍历的方式操作获取的每 ... -
Eclipse 支持jQuery 自动提示
2010-07-29 10:31 2858感谢:http://wxinpeng.it ...
相关推荐
在使用JQuery来实现动态表格增加行的场景中,主要涉及到的技术点包括: 1. DOM操作:文档对象模型(DOM)允许我们通过编程语言来操作HTML文档的结构、样式和内容。在这个例子中,DOM操作用于动态地向表格中插入新的...
本实例将深入探讨如何利用jQuery实现动态增加和删除表格行的功能,这对于创建数据表或者交互式表单来说非常实用。 首先,我们需要一个基本的HTML结构来展示表格。表格通常由`<table>`元素定义,每一行由`<tr>`元素...
本文将深入探讨如何使用jQuery创建动态表格,这是一个常见的需求,特别是在数据展示和用户交互丰富的Web应用中。 首先,让我们理解动态表格的基本概念。动态表格指的是在网页加载后或用户操作时根据需要生成或更新...
标题 "JQuery 动态生成DIV、Table并处理数据" 涉及的是使用JavaScript库JQuery来动态创建HTML元素,特别是DIV和Table,并且处理其中的数据。这在Web开发中非常常见,尤其是在构建交互式用户界面时。下面将详细阐述这...
这个主题"jQuery json动态数据表格分页代码"聚焦于使用jQuery、PHP和AJAX来实现这一功能。以下是相关知识点的详细说明: 1. **jQuery**:jQuery是一个流行的JavaScript库,它简化了HTML文档遍历、事件处理、动画和...
1. jQuery DataTables:这是一个强大的数据表插件,它提供了分页、排序、搜索和过滤等功能。DataTables支持自定义分页样式,同时提供了多种数据源(如Ajax、服务器端、JSON等)的支持。 2. jqGrid:jqGrid是一个...
但需要注意的是,虽然`jQuery`简化了开发过程,但在现代Web开发中,我们也可以考虑使用原生的JavaScript方法或更现代的库,如`React`、`Vue`等,它们提供了更高效和灵活的方式来处理这类问题。 总之,通过`jQuery`...
总的来说,jQuery-Paging插件为开发者提供了一种便捷的方式来实现动态分页和数据加载,它的易用性和丰富的定制选项使得在各种Web应用中都能灵活运用。结合HTML、CSS和JavaScript,你可以创建出既美观又高效的分页...
本实例主要展示了如何使用 Bootstrap 和 jQuery 创建一个带有分页跳转功能的表格,这在数据展示和管理中非常常见。我们将讨论以下几个关键知识点: 1. **Bootstrap**:Bootstrap 是一个流行的开源 CSS 框架,它提供...
jQuery-treetable插件是这种功能的一个典型实现,它允许用户在网页上创建交互式的、可折叠的表格,这对于展示具有层次关系的数据非常有用。 1. **jQuery-treetable的基本概念**: - **TreeNodes**: 树型表格中的每...
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
在介绍jQuery动态添加删除表格行(tr)和单元格(td)的过程中,首先需要明确的是jQuery库是JavaScript的一个快速、小巧、功能丰富的库,它简化了HTML文档遍历和操作、事件处理、动画和Ajax交互,对于Web开发人员来...
jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-ui-1.8.16jquery-...
"jquery-resizable-columns"正是这样一个jQuery插件,它允许用户通过鼠标拖动来改变表格列宽,从而满足不同场景下的数据查看需求。 一、jQuery可拖动列宽插件介绍 "jquery-resizable-columns"是基于jQuery的一个轻...
在这个“jquery动态增加修改删除表格,上移下移功能”的项目中,开发者利用jQuery实现了对表格的动态操作,这在网页数据展示和管理中非常常见。 首先,我们来理解这个项目的标题:“jquery动态增加修改删除表格,上移...
在JSP中,可能使用了JavaScript库(如jQuery、AngularJS或React)和AJAX来实现表格的动态加载功能,以及与后台服务器进行交互。 总结来说,动态加载树和动态加载表格都是为了提高数据展示的效率和用户体验。通过...
本教程将重点讲解如何使用jQuery实现动态表格,包括动态添加和删除表格行的功能。 首先,我们需要了解HTML表格的基本结构。一个简单的表格由`<table>`标签开始,`<tr>`表示表格行,`<th>`定义表头单元格,而`<td>`...
jQuery TreeGrid 是一个基于 jQuery 的插件,用于将普通的HTML表格转换成可折叠的树形结构,提供了一种高效且用户友好的方式来组织和展示层次化数据。这个组件在网页开发中非常实用,尤其是在处理复杂的数据组织和...
本示例项目"jquery动态表格数据分页搜索排序代码.zip"提供了使用jQuery实现动态表格数据展示、分页、搜索及排序的功能。下面将详细阐述这些功能的实现原理和步骤。 1. **动态表格数据**: 在网页上动态生成表格...