D_S_Form动态表单插件beat版发布

来源：互联网发布：程序员竖屏显示器编辑：程序博客网时间：2024/06/08 16:50

处女之作，思维有点乱，但最后是把功能实现了，欢迎扔砖头

D_S_Form插件在IE.5.5以上，FF，chrome测试通过，其它浏览器没测试，我想应该也没问题吧

首先在<head></head>区域引入JS文件： <script type="text/javascript" src="D_S_Form.js"></script>
随后初始化数据：
obj_id="box";//对象IDtr_s=1,tr_e=-1,td_s=0,td_e=-1;//说明见“图1”D_S_Form_C="#CCCCCC";//点击后的颜色AJAX_submit_id=[1,2,3,4,];//数组最后加逗号没关系AJAX_submit_url="save.asp?id=";//注意id等号后面不要写东西，id前面可以写其它参数D_S_Form=[ {type:1,name:"fullname",css_name:"fullname",isnull:false,matter:"onclick,onmouseover",form_fun:"alert('你点了一下我'),alert('路过^_^')"}, {type:2,name:"sex",css_name:"",isnull:false,matter:"onchange",form_fun:"alert(this.value)",list:"[['男','男'],['女','女']]"}, {type:1,name:"age",css_name:"age",isnull:true,matter:"",form_fun:""}, {type:2,name:"area",css_name:"",isnull:false,matter:"",form_fun:"",list:"[[1,'北京市'],[2,'天津市'],[3,'上海市'],[4,'湖南省'],[5,'四川省'],[6,'浙江省'],]"} ];

图1

D_S_Form中的参数说明(Type只有2个可选)：
当type为1，创建的是<input type=”text” />的表单元素，其中的参数有：
Type：表单类型
Name：表单元素名
css_name：调用的CSS名称
isnull：是否可以为空，true可以为空，false不可以为空
matter：表单元素的动作，如：onclick,onmouseover等
form_fun：表单动作执行的事件，与matter相对应，如果matter为空，则这里不会调用

{type:1,name:"fullname",css_name:"fullname",isnull:false,matter:"onclick,onmouseover",form_fun:"alert('你点了一下我'),alert('路过^_^')"}

生成HTML代码：

{type:2,name:"area",css_name:"",isnull:false,matter:"",form_fun:"",list:"[[1,'北京市'],[2,'天津市'],[3,'上海市'],[4,'湖南省'],[5,'四川省'],[6,'浙江省'],]"}

生成HTML代码：

</select>

当我将“姓名”这项为空再提交表单，会弹出：“姓名”不能为空，这里的姓名是自动从第一行取的

D_S_Form.js代码

var tr_s,tr_e,td_s,td_e,obj_id,D_S_Form,D_S_Form_this,D_S_Form_tab,D_S_Form_tr,D_S_Form_input,D_S_Form_Save,AJAX_submit_url,AJAX_submit_id;var D_S_Form_this=-1;var D_S_Form_arr=[];function isIE(){ //ie? if (window.navigator.userAgent.indexOf("MSIE")>=1) return true; else return false; } if(!isIE()){ //firefox innerText define ,xurun HTMLElement.prototype.__defineGetter__ ( "innerText", function () { var anyString = ""; var childS = this.childNodes; for(var i=0; i<childS.length; i++) { if(childS[i].nodeType==1) anyString += childS[i].tagName=="BR" ? '/n' : childS[i].innerText; else if(childS[i].nodeType==3)anyString += childS[i].nodeValue; } return anyString; } ); }window.onload=function(){document.body.innerHTML=document.body.innerHTML+'<div style="position:absolute;width:160px;padding:0 10px 5px 10px;background:#FFFFFF;margin:0 auto; display:none;text-align:center;" id="D_S_Form_input"></div>';D_S_Form_input=document.getElementById("D_S_Form_input");D_S_Form_init();}function D_S_Form_init(){D_S_Form_tab=document.getElementById(obj_id);D_S_Form_tr=D_S_Form_tab.rows;var D_S_Form_text="";//定义全局变量，用来保存单元格初始内容for(D_S_Form_i=tr_s;D_S_Form_i<D_S_Form_tr.length+tr_e;D_S_Form_i++){ (function(m){ D_S_Form_tr[D_S_Form_i].onclick=function(){if(D_S_Form_this==m){}else{D_S_Form_set(this,m);}}; })(D_S_Form_i)}}function set_html(i){//建立单元格表单switch(D_S_Form[i].type){case 1:{var HTML='<input type="text" name="'+D_S_Form[i].name+'" id="'+D_S_Form[i].name+'" class="'+D_S_Form[i].css_name+'" ';var matter_arr=D_S_Form[i].matter.split(",");if(matter_arr[0]!=""){var form_fun_arr=D_S_Form[i].form_fun.split(",");for(k=0;k<matter_arr.length;k++){HTML=HTML+matter_arr[k]+"="+form_fun_arr[k]+" ";}}HTML=HTML+'value="'+D_S_Form_text+'" />';return HTML;}break;case 2:{ var select_list=D_S_Form[i].list;select_list=select_list.replace("],]","]]");select_list=select_list.replace("[,[","[[");var list_arr=eval(select_list);var HTML='<select name="'+D_S_Form[i].name+'" id="'+D_S_Form[i].name+'" class="'+D_S_Form[i].css_name+'" ';var matter_arr=D_S_Form[i].matter.split(",");if(matter_arr[0]!=""){var form_fun_arr=D_S_Form[i].form_fun.split(",");for(k=0;k<matter_arr.length;k++){HTML=HTML+matter_arr[k]+"="+form_fun_arr[k]+" ";}}HTML=HTML+'>'for(k=0;k<list_arr.length;k++){HTML=HTML+'<option value="'+list_arr[k][0]+'"';if(D_S_Form_text==list_arr[k][1]){HTML=HTML+' selected="selected"';}HTML=HTML+'>'+list_arr[k][1]+'</option>'}HTML=HTML+'</select>';return HTML;}break;}}function getTop(e){//获取元素纵坐标var offset=e.offsetTop;if(e.offsetParent!=null) offset+=getTop(e.offsetParent);return offset;}function getLeft(e){//获取元素横坐标var offset=e.offsetLeft;if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);return offset;}function D_S_Form_set(obj,n){if(D_S_Form_this!=-1)drop_form(D_S_Form_this);//删除上一个表单D_S_Form_this=n;D_S_Form_arr=[];obj.style.backgroundColor=D_S_Form_C;D_S_Form_input.style.backgroundColor=D_S_Form_C;D_S_Form_input.style.display="";D_S_Form_input.style.top=(getTop(obj)+obj.clientHeight-1)+"px";D_S_Form_input.style.left=getLeft(obj)+obj.offsetWidth/2-D_S_Form_input.offsetWidth/2+"px";D_S_Form_input.innerHTML='<input type="button" value="保存" class="D_S_Form_B" onclick="D_S_Form_S('+n+',this)" /><input type="button" value="取消" class="D_S_Form_B" onclick="drop_form('+n+')" style="margin-left:20px;" mce_style="margin-left:20px;" />';for(i=td_s;i<obj.cells.length+td_e;i++){D_S_Form_text=obj.cells[i].innerText;obj.cells[i].innerHTML=set_html(i-td_s);//调用set_html,显示表单D_S_Form_arr.push(D_S_Form_text);}}function drop_form(n){//表单未修改时的移除表单D_S_Form_this=-1;D_S_Form_input.style.display="none";D_S_Form_tr[n].style.backgroundColor="";for(i=td_s;i<D_S_Form_tr[n].cells.length+td_e;i++){D_S_Form_tr[n].cells[i].innerHTML=D_S_Form_arr[i-td_s];}}function drop_form2(n){//表单修改后时的移除表单D_S_Form_this=-1;D_S_Form_input.style.display="none";D_S_Form_tr[n].style.backgroundColor="";for(i=td_s;i<D_S_Form_tr[n].cells.length+td_e;i++){var forms=D_S_Form_tr[n].cells[i].childNodes[0];if(forms.type=="select-one"){for(j=0;j<forms.length;j++){if(forms.selectedIndex==j)D_S_Form_tr[n].cells[i].innerHTML=forms[j].innerText;}}else{D_S_Form_tr[n].cells[i].innerHTML=forms.value;}}}function D_S_Form_S(n,btn){//提交保存表单验证var D_S_Form_r=[];var D_S_Form_r1=[];for(i=td_s;i<D_S_Form_tr[n].cells.length+td_e;i++){var forms=D_S_Form_tr[n].cells[i].childNodes[0];D_S_Form_r1.push(forms.value);if(forms.type=="select-one"){for(j=0;j<forms.length;j++){if(forms.selectedIndex==j)D_S_Form_r.push(forms[j].innerText);}}elseD_S_Form_r.push(forms.value);}if(D_S_Form_r.toString()==D_S_Form_arr.toString()){drop_form(n);}else{for(i=0;i<D_S_Form_r1.length;i++){if(D_S_Form_r1[i]=="" && !D_S_Form[i].isnull){alert("/""+D_S_Form_tr[0].cells[i].innerText+"/"不能为空");D_S_Form_tr[n].cells[i].childNodes[0].focus();return false;}}btn.disabled=true;D_S_Form_Submit(n,btn);//AJAX提交表单}}function D_S_Form_Submit(n,btn){ //创建XMLHttpRequest对象 var xmlhttp; try{ xmlhttp=new XMLHttpRequest(); }catch(e){ xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } //创建请求结果处理程序 xmlhttp.onreadystatechange=function(){ if (4==xmlhttp.readyState){ if (200==xmlhttp.status){btn.disabled=false;if(xmlhttp.responseText)alert(xmlhttp.responseText);elsedrop_form2(n);//移除表单 }else{ alert("保存失败，请检查");btn.disabled=false;drop_form(n); } } } //打开连接，true表示异步提交 xmlhttp.open("post",AJAX_submit_url+AJAX_submit_id[n-tr_s], true); //当方法为post时需要如下设置http头 xmlhttp.setRequestHeader('Content-type','application/x-www-form-urlencoded'); //发送数据 xmlhttp.send(D_S_Forms(n));}function D_S_Forms(n){var forms="";for(i=td_s;i<D_S_Form_tr[n].cells.length+td_e;i++){forms=forms+(D_S_Form[i-td_s].name+"="+escape(D_S_Form_tr[n].cells[i].childNodes[0].value))+"&";}return forms;}

HTML代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>动态表单</title><mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body {margin: 0px;}table{ border-collapse:collapse;font-size:12px;}td{ border:1px solid #999999; padding:2px; height:26px; }.D_S_Form_B{text-align:center; border:1px solid #9CC; background:#FFF; height:22px; line-height:20px;}.fullname{width:160px; border:1px solid #F00;}.age{width:60px;border:1px solid #F00;}</style><mce:script type="text/javascript" src="D_S_Form.js" mce_src="D_S_Form.js"></mce:script><mce:script type="text/javascript"></mce:script></head> <body><table width="600" border="0" cellspacing="0" cellpadding="0" id="box" style="margin-left:100px; margin-top:100px;" mce_style="margin-left:100px; margin-top:100px;"> <tr> <td width="190" align="center"><strong>姓名</strong></td> <td width="60" align="center"><strong>性别</strong></td> <td width="110" align="center"><strong>年龄</strong></td> <td width="100" align="center"><strong>地区</strong></td> <td width="140" align="center"><strong>操作</strong></td> </tr> <tr> <td>张三</td> <td>男</td> <td>24</td> <td>天津市</td> <td align="center">删除</td> </tr> <tr> <td>李四</td> <td>女</td> <td>21</td> <td>浙江省</td> <td align="center">删除</td> </tr> <tr> <td>王五</td> <td>男</td> <td>22</td> <td>湖南省</td> <td align="center">删除</td> </tr> <tr> <td>杨六</td> <td>男</td> <td>26</td> <td>北京市</td> <td align="center">删除</td> </tr> <tr> <td colspan="5" align="center">这里不能操作哦</td> </tr></table></body></html>