JSP+Ajax添加、删除多选框实例
[b]本例是采用JSP + Ajax + 文本来演示多选、全选，添加、删除、更新checkbox多选框的效果。
本例充分展现了利用JavaScript控制HTML DOM以及利用XML http 传递数据，利用JSP操作文本的效果。[/b]
1，JavaScript 用来控制页面内容的现实与增删效果;
2，JSP作为后台，对文本进行读取、写入、更新等操作;
3，文本格式是用来存储数据的，数据编码UTF-8;4, 本例子在win32,Red hat Linux 9下 jdk1.5,Tomcat 5.0,Apache 2.5下调试通过，同时兼容Firefox 1.0,Opera 8.0,IE6。
4，本例把开发过程中的注释全部保留下来了，并且保存了不同时间的版本，以供查阅。
[color=red]
在线说明文档 [url]http://jiarry.blogchina.com/5599587.html[/url]
静态页面演示地址：[url]http://jarryli.googlepages.com/checkbox_test.html[/url] (详细的说明，随后补充)
源文件下载地址：[url]http://jarryli.googlepages.com/checkbox.rar[/url]
[/color]
[html]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> JSP+Ajax 添加删除Checkbox实例 example test</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script type="text/javascript">
function $() {
var elements = new Array();
for (var i = 0; i < arguments.length; i++) {
var element = arguments[i];
if (typeof element == 'string')
element = document.getElementById(element);
if (arguments.length == 1)
return element;
elements.push(element);
}
return elements;
}
//cody by jarry;
var emptyCol="",overCol="#f1f1f1",checkedCol="#F4FFF4";
function getAbsoluteLeft( ob ){
if(!ob){return null;}
var obj = ob;
var objLeft = obj .offsetLeft;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
objLeft += obj .offsetParent.offsetLeft;
obj = obj .offsetParent;
}
return objLeft ;
}
// get absolute TOP position
function getAbsoluteTop( ob ){
if(!ob){return null;}
var obj = ob;
var objTop = obj .offsetTop;
while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
objTop += obj .offsetParent.offsetTop;
obj = obj .offsetParent;
}
return objTop ;
}
String.prototype.trim = function()
{ return this.replace(/(^\s*)|(\s*$)/g, "");}
function isExist(child,obj){
//obj has element the child;
for(var i=0;i<obj.elements.length;i++){
if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
if(obj.elements[i].value==child)return true;
}
}
return false;
}
function validateURL(url){
//validateURL
if(url.search(/^[A-Za-z0-9 -]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/)!=0){
return false;
//}else if(url.substring(0,4)=="www."){
//return false;
}else{
return true;
}
}
function countLength(obj){
if(obj==null)return;
var dLen = 0,sLen = 0;
for(i=0; i< obj.length; i++ ){
if(obj.charCodeAt(i) > "0" && obj.charCodeAt(i) < "128")
sLen+=1;
else
dLen+=2;
}
totalLen = sLen+dLen;
return totalLen;
}
var strAll=unescape("%u5168%u9009");
var canAll=unescape("%u53D6%u6D88");
function clickchk(obj){
var allcheck=true;
for(var i=0;i<obj.elements.length;i++){
var eli = obj.elements[i];
if(eli.tagName.toLowerCase()=="input" && eli.type=="checkbox"){
eli.parentNode.style.backgroundColor = eli.checked ? checkedCol :"";
if(eli.checked==false){allcheck=false;}
}
}
obj.elements["check"].value=allcheck?canAll:strAll;
}
function addSite(obj){
var url=obj.url.value.trim();
if(url.match(/^\s*$/g) || !validateURL(url)){alert("请输入正确网址：如mysite.com");obj.url.focus();return;}
if(isExist(url,obj)){alert("你添加的网址已经存在列表中");return;}
var list=document.getElementById("list");
var chkbox=document.createElement("input");
chkbox.type="checkbox";
chkbox.onclick=function(){clickchk(obj);}//全部选择后check按钮显示取消;
chkbox.value=url;
chkbox.name="url_chkbox";
var hr=document.createElement("hr");
hr.size="0";hr.style.borderTop="1px solid gray";
var txt=document.createTextNode(url);
var div=document.createElement("div");
div.appendChild(chkbox);
div.appendChild(txt);
div.style.borderBottom="1px dashed gray";
div.style.padding="5px";
//div.appendChild(hr);
//div.style.backgroundColor = "olive";
div.onmouseover=function(){
showDelete(this);
}
div.onmouseout=function(){
hideDelete(this);
}
list.appendChild(div);
//end add;
//如果已经添加了多选框则去掉禁用;
if(obj.check.disabled==true){
obj.check.disabled=false;
obj.recheck.disabled = false;
obj.remove.disabled=false;
}
return false;
}
function checkall(obj){//全选or取消全选;
var chk=obj.elements["check"];
for(var i=0;i<obj.elements.length;i++){
if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
if(chk.value==strAll){//check all checkbox input;
obj.elements[i].checked=true;
obj.elements[i].parentNode.style.backgroundColor = checkedCol;
}else{
obj.elements[i].checked=false;
obj.elements[i].parentNode.style.backgroundColor = emptyCol;
}
}
}
if($('list').childNodes.length<=1)return;
chk.value=chk.value==canAll?strAll:canAll;
//更改全选/取消的显示;
}
function reverseCheck(obj){
var chk=obj.elements["check"];
for(var i=0;i<obj.elements.length;i++){
if(obj.elements[i].tagName.toLowerCase()=="input" && obj.elements[i].type=="checkbox"){
obj.elements[i].checked = obj.elements[i].checked ? false : true;
}
clickchk(obj);
}
}
function del(list,obj){
//删除list的内容
var candel=false;
var i=list.childNodes.length;
var end = -1;
while( i > end ){ //如果存在child
var s=list.childNodes[i];
if(typeof(s)!="undefined" && s.tagName){
try{ //如果child的类型不为空;
var tgname = s.tagName.toUpperCase();
if(tgname != "DIV" || s.childNodes.length <=0 )return;
//子集是div且还有子集
var s1 = s.childNodes[0];
if( s1.type.toLowerCase() =="checkbox" && s1.checked==true ){
//如果该子集里的checkbox选中,那么删除改子集(div);
candel = true;
list.removeChild(s);
}
}catch(ex){
//alert(ex.toString());
}
}
i--;
}
if(candel==false){alert("请选择你要删除的选项")}
isDisabledButton();
}
function isDisabledButton(){
var objform=document.sitelist;
var list=$("list");
var hasDivChild = false;
if(list.childNodes.length>0 ){
for(var i=0;i<list.childNodes.length;i++){
var s=list.childNodes[i];
if( typeof(s)!="undefined" && s.tagName) {
if(s.tagName.toUpperCase()=="DIV")
hasDivChild = true;
}
}
}
objform.check.disabled= hasDivChild?false:true;
objform.recheck.disabled= hasDivChild?false:true;
objform.check.value=strAll;
objform.remove.disabled= hasDivChild?false:true;
}
function delSingle(objparent,objdel,objchild){
objparent.removeChild(objchild);
objdel.style.display="none";
//
isDisabledButton();
}
function editSingle(objparent,objedit,objchild){
function makeLink(text , tag){
var temobj = document.createElement(tag);
temobj.style.marginLeft="5px"; temobj.style.marginRight="5px";
temobj.style.textDecoration="underline";temobj.style.cursor="pointer";
temobj.appendChild( document.createTextNode(text) );
return temobj;
}
try{
var secondChild = objchild.childNodes[1];
var url = secondChild;
var urlStr = url.nodeValue ;//? url.nodeValue : url.toString() ;
if(urlStr==null || urlStr.trim=="")return;
var editorPanel = document.createElement("span");
objchild.removeChild(url);
var editor = document.createElement("input");
editor.type="text";
//var maxLen = parseInt(objparent.style.width) -
JSP+AJAX多选、全选，添加、删除、更新多选框
4星 · 超过85%的资源 需积分: 15 17 浏览量
2008-12-09
13:40:34
上传
评论
收藏 248KB RAR 举报 
JSP+AJAX多选、全选，添加、删除、更新多选框.rar （29个子文件） 
JSP+AJAX多选、全选，添加、删除、更新多选框 action 
checkbox_text.jsp 976B savedata.bak.jsp 2KB savedata.jsp 3KB checkbox_array.jsp 3KB update.jsp 3KB delete.jsp 4KB inc head.jsp 746B readfile.jsp 7KB data.jsp 775B js public.js 5KB net.js 4KB drag.js 4KB checkbox.js 17KB init.js 1KB cookie.js 679B _note 
send.txt 20KB
checkbox_test.html 21KB test.bak.html 7KB note.txt 2KB readtext.jsp 752B test1.html 6KB _backup 
checkbox20060901.rar 56KB checkbox20060903.rar 115KB checkbox20060831.rar 28KB checkbox.jsp 6KB style style.css 252B data checkbox_list.data 841B checkbox_list.txt 237B checkbox2.jsp 2KB资源评论
warmsunshine2013-07-12这个太复杂了，初学者还是很难看懂
天涯无边2014-06-30要是可以直接导入就好 了，不过还是有帮助，谢谢！
st01804252013-04-04可惜啊 不是我要的
rskyz5202012-06-26还要，可以搭建，不那执行！
tzhx0729
- 粉丝: 1
- 资源: 12
最新资源
- Day43 Java反射（二）
- kenwood-健伍TK-868G车载电台维修手册（含PCB图、原理图）2024更新
- kenwood-健伍tm-471a车载电台维修手册（含PCB图、原理图）2024
- Android System WebView-109.0.5414.118 arm,arm64.apk
- 无人机遂行编队飞行中的纯方位无源定位_周宏兵.pdf
- 2000-2017年各省经济政策不确定性指数数据.xlsx
- 国家中小学智慧教育平台【教材查询下载器v3.1.0】+Mac版本
- 蜂网-SCM-OMS-销退单管理.pptx
- 蜂网-3PL客商、数据字典培.pptx
- 蜂网-SCF资金机构入驻和权限管理.pdf
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
