<!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>
</head>
<body>
<script>
//模板HTML代码
var _LINE_TPL_FORM_HTML_ = '\
<div>\
<input id="mycode_[tmpNumIdName]" type="text" msg="用户名" value="[mycode_value]">\
<input id="myecho_[tmpNumIdName]" type="text" msg="密码" value="[myecho_value]">\
<input type="button" value="添加" id="momoca" onclick=[tmpClassName].print([tmpNumIdName])>\
</div>\
';
var _LINE_TPL_ECHO_HTML_ = '\
<div id="[tmpClassName]_[tmpNumIdName]"><span id="[tmpClassName]_[tmpIndexNameId]_[tmpNumIdName]">[tmpNumIdName]</span>.\
<span onclick=[tmpClassName].edit([tmpNumIdName])>编辑</span>\
<br/>\
<span onclick=[tmpClassName].del([tmpNumIdName])>删除</span>\
<br/>\
用户名:<span id=mycode_edit_[tmpNumIdName]>[mycode_value]</span>\
<br>\
密码:<span id=myecho_edit_[tmpNumIdName]>[myecho_value]</span>\
<span id="form_[tmpClassName]_[tmpNumIdName]"></span>\
</div>\
';
var _FORM_TPL_ECHO_HTML_ = '\
<input name="abc[]" value="[mycode_value]">\
<input name="abc[]" value="[myecho_value]">\
';
var Class = {
create: function()
{
return function()
{
this.initialize.apply(this, arguments);
}
}
}
Array.prototype.del=function(n) {
if(n<0)
return this;
else
return this.slice(0,n).concat(this.slice(n+1,this.length));
}
var addTpl = Class.create();
addTpl.prototype =
{
formHtml:"",
innerFormHtml:"",
echoHtml:"",
isIE:true,
isCreate:true,
isEdit:false,
field:{},
values:{},
tmpvals:{},
index:0,
formId:"",
echoId:"",
submitId:"",
className:"tpl",//设置类名
indexName:"num",//设置索引名
tmpClassName:/\[tmpClassName\]/g,//把模板中的[tmpClassName]换成类名可以用到要触发事件.
tmpNumIdName:/\[tmpNumIdName\]/g,//把模板中的[tmpNumIdName]换成索引可以用到自定义ID.
tmpIndexNameId:/\[tmpIndexNameId\]/g,//把模板中的[tmpIndexNameId]换成索引名可以用到自定义ID.
error:"",
errid:0,
errcode:{
noNull:"不能为空!",
isNum:"必须是数值!",
noChk:"信息不合法.请检查表单!",
noReCreate:"您不能重复创建输入对话!",
noSubmit:"提交失败提示:\n\n",
noReEdit:"您不能重复创建编辑对话"
},
submitName:{
add:"添加",
edit:"编辑"
},
/**
* 构造函数
*
* @param string html 模板html代码(以js方式存储)
* @param string alertId 显示输入信息的ID
* @param string echoId 显示输出信息的ID
*
* @return void
*/
initialize : function (formHtml,echoHtml,formId,echoId)
{
this.isIE = !!document.all;
this.formHtml = formHtml||"";
this.echoHtml = echoHtml||"";
this.formId = formId||"";
this.echoId = echoId||"";
},
$ : function (obj){
return typeof(obj)=="object"?"obj":document.getElementById(obj);
},
HtmlEncode : function (text){
return text.replace(/&/g, '&').replace(/\"/g, '"').replace(/</g, '<').replace(/>/g, '>');
},
set : function (idi){
var i=0;
for(field in this.field){
id=field+"_"+idi;
this.tmpvals[field]=this.$(id).value;
i++;
}
this.tmpvals['length']=i;
this.values[idi]=this.tmpvals;
//this.values.push(this.tmpvals);
},
get : function (){
for(field in this.values){
alert(field);
}
},
chkstr : function (id){
if(this.$(id).value==''){
this.errid++;
this.error+=this.errid+"."+this.$(id).getAttribute('msg')+this.errcode.noNull+"\n";
}else{
this.$(id).value=this.HtmlEncode(this.$(id).value);
}
},
chkint : function (id){
if(this.$(id).value==''){
this.errid++;
this.error+=this.errid+"."+this.$(id).getAttribute('msg')+this.errcode.noNull+"\n";
}else{
var reg=/^[\d|.]+$/;
if(!reg.test(this.$(id).value)){
this.errid++;
this.error+=this.errid+"."+this.$(id).getAttribute('msg')+this.errcode.noChk+"!\n";
}
}
},
chk : function (i){
this.errid=0;
this.error="";
for(field in this.field){
id=field+"_"+i;
val=this.field[field];
switch (val){
case "str":
this.chkstr(id);
break;
case "int":
this.chkint(id);
break;
case "arr":
alert(val);
break;
default:
this.error+=this.errcode.noChk;
break;
}
}
if(this.error==''){
return true;
}else{
return false;
}
},
edit : function (i){
if(!this.isCreate)alert(this.errcode.noReEdit);
if(this.formId!=''&&this.isCreate){
this.show();
this.isEdit=true;
tmpHTML=
this.formHtml
.replace(this.tmpNumIdName,i)
.replace(this.tmpClassName,this.className);
for(field in this.field){
valid="["+field+"_value]";
id=field+"_edit_"+i;
val=this.field[field];
if(val=='str'||val=='int'){
tmpHTML=tmpHTML.replace(valid,this.$(id).innerHTML);
}
}
this.$(this.formId).innerHTML=tmpHTML;
this.updateSubmitName();
}
},
del: function (i){
id=this.className+"_"+i;
this.values[(i-1)]={};
this.delHtml(id);
this.update();
},
delHtml : function(n){
h=this.$(n);
h.parentNode.removeChild(h);
return false;
},
create : function (){
if(!this.isCreate)alert(this.errcode.noReCreate);
if(this.formId!=''&&this.isCreate){
this.index++;
this.show();
tmpHTML=
this.formHtml
.replace(this.tmpNumIdName,this.index)
.replace(this.tmpClassName,this.className);
for(field in this.field){
valid="["+field+"_value]";
val=this.field[field];
if(val=='str'||val=='int'){
tmpHTML=tmpHTML.replace(valid,'');
}
}
this.$(this.formId).innerHTML=tmpHTML;
this.updateSubmitName();
}
},
update : function (){
tmpi=1;
for(i=1,j=this.index;i<=j;++i){
if(typeof(this.values[(i-1)].length)!='undefined'){
id=this.className+"_"+this.indexName+"_"+i;
this.$(id).innerHTML=tmpi;
tmpi++;
}
}
},
updateSubmitName : function (){
if(this.submitId!=''){
if(this.$(this.submitId).tagName=='INPUT'&&this.$(this.submitId).type!="image"){
if(this.isEdit){
this.$(this.submitId).value=this.submitName.edit;
}else if(!this.isCreate){
this.$(this.submitId).value=this.submitName.add;
}
}else if(this.$(this.submitId).tagName=='INPUT'&&this.$(this.submitId).type=="image"){
if(this.isEdit){
this.$(this.submitId).src=this.submitName.edit;
}else if(!this.isCreate){
this.$(this.submitId).src=this.submitName.add;
}
}else{
if(this.isEdit){
this.$(this.submitId).innerHTML=this.submitName.edit;
}else if(!this.isCreate){
this.$(this.submitId).innerHTML=this.submitName.add;
}
}
}
},
print : function (i){
if(this.isEdit){
if(this.chk(i)){
this.set(i);
for(field in this.field){
valid="["+field+"_value]";
newId=field+"_"+i;
editId=field+"_edit_"+i;
val=this.field[field];
if(val=='str'||val=='int'){
this.$(editId).innerHTML=this.$(newId).value;
}
}
this.innerFORM(i);
this.hide();
}else{
alert(this.errcode.noSubmit+this.error);
}
}else if(!this.isCreate){
if(this.chk(this.index)){
this.set(this.index);
var tmpHTML=
this.echoHtml
.replace(this.tmpNumIdName,this.index)
.replace(this.tmpClassName,this.className)
.replace(this.tmpIndexNameId,this.indexName);
for(field in this.field){
valid="["+field+"_value]";
id=field+"_"+this.index;
val=this.field[field];
if(val=='str'||val=='int'){
tmpHTML=tmpHTML.replace(valid,this.$(id).value);
}
}
this.hide();
this.$(this.echoId).innerHTML += tmpHTML;
this.innerFORM(this.index);
}else{
alert(this.errcode.noSubmit+this.error);
}
}
},
innerFORM : function (i){
if(this.innerFormHtml!=''){
tmpHTML=this.innerFormHtml;
for(field in this.field){
valid="["+field+"_value]";
val=this.field[field];
if(val=='str'||val=='int'){
tmpHTML=tmpHTML.replace(valid,this.values[i][field]);
}
}
id='form_'+this.className+'_'+i;
this.$(id).innerHTML=tmpHTML;
}
},
hide : function (){
this.$(this.formId).innerHTML = '';
this.$(this.formId).style.display = 'none';
this.isCreate=true;
this.isEdit=false;
},
show : function (){
this.$(this.formId).innerHTML = '';
this.$(this.formId).style.display = '';
this.isCreate=false;
}
}
/*
var tpl = new addTpl(要弹出FORM表单的模板代码,要弹出输出的HTML模板代码,FORM存放的容器ID,显示存放的容器ID);
tpl.className="tpl",//设置类名
//tpl.indexName="num",//设置索引名
//tpl.tmpClassName=/\[tmpClassName\]/g,//把模板中的[tmpClassName]换成类名(的正则)可以用到要触发事件.
//tpl.tmpNumIdName=/\[tmpNumIdName\]/g,//把模板中的[tmpNumIdName]换成索引名(的正则)可以用到自定义ID.
//tpl.tmpIndexNameId=/\[tmpIndexNameId\]/g,//把模板中的[tmpIndexNameId]换成索引(的正则)可以用到自定义ID.
tpl.field={mycode:'str',myecho:'int'};//设置模板里的字段名和检查类型,其它的还有:sel,chk
//显示设置输入字段值可用在模板里用[mycode_value].([字段ID_value])
//在模板里的编辑删除等操作可以写为:<span onclick=[tmpClassName].edit([tmpNumIdName])>编辑</span>
*/
var tpl = new addTpl(_LINE_TPL_FORM_HTML_,_LINE_TPL_ECHO_HTML_,'lineForm','lineEcho');
tpl.field={mycode:'str',myecho:'int'};//sel,chk
tpl.className="tpl";
tpl.innerFormHtml=_FORM_TPL_ECHO_HTML_;
tpl.submitId="momoca";
</script>
<span onclick="tpl.create();">添加</span>
<div id="lineForm"></div>
<div id="lineEcho"></div>
</body>
</html>
