在jsp页面增删行、table的jquery插件
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
function () {
$(".Rept").find(":checkbox").attr("checked",true);},
function () {
$(".Rept").find(":checkbox").attr("checked",false);}
);
}
});
})(jQuery);
2.应用demo（a.jsp）
}
}else {
if(a.length < 1) {alert("至少选一个")}else {
$(".Rept").find(":checkbox:checked").parent().parent().remove();
}
}
});
$con.find(options.reverse).toggle(
var a = $(".Rept").find(":checkbox:checked");
if (a.length > 2){
if(confirm("确定要删除多个表格吗？")){
$(".Rept").find(":checkbox:ห้องสมุดไป่ตู้hecked").parent().parent().remove();
var tempHtml = "<tr>"+$items.html()+"</tr>";
var btn = '<tr class="bt"> <td><input type="button" class="reverse" value="全选"></input> </td> <td align="center"><input type="button" class="addBtn" value="添加"></input> <input type="button" class="delBtn" value="删除"></input></td> </tr> ';
</body>
</html>
3.demo截图
在jsp页面增删行、table的jquery插件
1.插件代码：
(function ($) {
var defaults = {
container: ".Rept", //最外层的容器class
items: ".items", //具体行class
reverse:".reverse",//反选按钮
addBtn: ".addBtn", //添加按钮class
地址：
</td>
<td align="center">
<input type="text"/>
</td>
<td align="center">
邮编：
</td>
<td align="center">
<input type="text"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
$(".items").after(btn);
//添加行事件
$con.find(options.addBtn).live("click", function () {
$(".bt").before(tempHtml);
});
//删除行事件
$con.find(options.delBtn).live("click", function () {
<tr class="items">
<td>
<input type="checkbox"/>
</td>
<td>
<table style="width:100%;border:solid 2px #08b0dc;">
<tr style="border:solid 2px #08b0dc;">
<td align="center">
名称：
</td>
<td align="center">
<input type="text"/>
</td>
<td align="center">
性别：
</td>
<td align="center">
<input type="text"/>
</td>
</tr>
<tr>
<td align="center">
delBtn: ".delBtn"//删除按钮class
}
$.extend({
Rept: function (options) {
options = $.extend(defaults, options);
$con = $(options.container);
$items = $con.find(options.items); //模板行
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.Rept();
});
</script>
<table style="width:100%;border:solid 4px #78b0dc;" class="Rept" >
$(".Rept").find(":checkbox").attr("checked",true);},
function () {
$(".Rept").find(":checkbox").attr("checked",false);}
);
}
});
})(jQuery);
2.应用demo（a.jsp）
}
}else {
if(a.length < 1) {alert("至少选一个")}else {
$(".Rept").find(":checkbox:checked").parent().parent().remove();
}
}
});
$con.find(options.reverse).toggle(
var a = $(".Rept").find(":checkbox:checked");
if (a.length > 2){
if(confirm("确定要删除多个表格吗？")){
$(".Rept").find(":checkbox:ห้องสมุดไป่ตู้hecked").parent().parent().remove();
var tempHtml = "<tr>"+$items.html()+"</tr>";
var btn = '<tr class="bt"> <td><input type="button" class="reverse" value="全选"></input> </td> <td align="center"><input type="button" class="addBtn" value="添加"></input> <input type="button" class="delBtn" value="删除"></input></td> </tr> ';
</body>
</html>
3.demo截图
在jsp页面增删行、table的jquery插件
1.插件代码：
(function ($) {
var defaults = {
container: ".Rept", //最外层的容器class
items: ".items", //具体行class
reverse:".reverse",//反选按钮
addBtn: ".addBtn", //添加按钮class
地址：
</td>
<td align="center">
<input type="text"/>
</td>
<td align="center">
邮编：
</td>
<td align="center">
<input type="text"/>
</td>
</tr>
</table>
</td>
</tr>
</table>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
$(".items").after(btn);
//添加行事件
$con.find(options.addBtn).live("click", function () {
$(".bt").before(tempHtml);
});
//删除行事件
$con.find(options.delBtn).live("click", function () {
<tr class="items">
<td>
<input type="checkbox"/>
</td>
<td>
<table style="width:100%;border:solid 2px #08b0dc;">
<tr style="border:solid 2px #08b0dc;">
<td align="center">
名称：
</td>
<td align="center">
<input type="text"/>
</td>
<td align="center">
性别：
</td>
<td align="center">
<input type="text"/>
</td>
</tr>
<tr>
<td align="center">
delBtn: ".delBtn"//删除按钮class
}
$.extend({
Rept: function (options) {
options = $.extend(defaults, options);
$con = $(options.container);
$items = $con.find(options.items); //模板行
<script type="text/javascript" src="a.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$.Rept();
});
</script>
<table style="width:100%;border:solid 4px #78b0dc;" class="Rept" >