D_S_Form动态表单插件beat版发布

本文链接：https://blog.csdn.net/bing475879749/article/details/4796885

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

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

首先在<head></head>区域引入JS文件： <script type="text/javascript" src="D_S_Form.js"></script>
随后初始化数据：
obj_id="box";//对象ID tr_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.οnlοad=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].οnclick=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" οnclick="D_S_Form_S('+n+',this)" /><input type="button" value="取消" class="D_S_Form_B" οnclick="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); } } else D_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); else drop_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>