模板
教程
环境
性能
功能
管理
重写表格－－[js源码]你如果用的上，这就是好东西.
发表于：2007-06-30来源：作者：点击数：
标签：
html head title/title meta http-equiv=Content-Type content=text/html; charset=gb2312 script language= Java Script !-- /* 1.必须要有两个隐藏按钮：div_mode和lid; 2.添加、修改输入区必须和 java script脚本重写的表格处于同一个表单中。 */ var tr_c
<html><head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="JavaScript">
<!--
/*
1.必须要有两个隐藏按钮：div_mode和lid;
2.添加、修改输入区必须和javascript脚本重写的表格处于同一个表单中。
*/
var tr_count=2;//表格中<tr>行数。
var lid;//表格处于添加、修改、删除时，当前操作的tr行数序号。
var table1="<table width=\"80%\" border=\"1\" bgcolor=\"#FFFFFF\" bordercolor=\"#999999\" cellpadding=\"2\" align=\"center\"><tr><td height=\"21\">Check</td><td height=\"21\">td1(name)</td><td height=\"21\">td2(age)</td><td height=\"21\">td3(price)</td><td height=\"21\">td4(in_dt)</td><td height=\"21\">td5(out_dt)</td><td height=\"21\">修改</td></tr>";
var td000= new Array();
var td1= new Array();
var td2= new Array();
var td3= new Array();
var td4= new Array();
var td5= new Array();
var td999= new Array();
var tr= new Array();
var data1= new Array();
var data2= new Array();
var data3= new Array();
var data4= new Array();
var data5= new Array();
//函数一【显示添加、修改表格】靠隐藏按钮保存div_mode状态。
function change_show(div_mode,lid)
{ var fmobj=document.form1;
if(div_mode=="add"){//fmobj.ok.value="添加";
fmobj.div_mode.value="add";
fmobj.ltd1.value="";fmobj.ltd2.value="";
fmobj.ltd3.value="";fmobj.ltd4.value="";
fmobj.ltd5.value="";
}
if(div_mode=="xiugai"){//fmobj.ok.value="修改";
fmobj.div_mode.value="xiugai";fmobj.lid.value=lid;
fmobj.ltd1.value=eval("fmobj.name"+lid+".value");
fmobj.ltd2.value=eval("fmobj.age"+lid+".value");
fmobj.ltd3.value=eval("fmobj.price"+lid+".value");
fmobj.ltd4.value=eval("fmobj.in_dt"+lid+".value");
fmobj.ltd5.value=eval("fmobj.out_dt"+lid+".value");
}
}
//函数二【各种状态的总处理】lid在函数内转换成数值型.
function change(div_mode,lid)
{ var fmobj=document.form1;
if(div_mode=="add"){tr_count++;lid=tr_count;item_change(fmobj,parseInt(lid));}
if(div_mode=="xiugai"){item_change(fmobj,parseInt(lid));}
if(div_mode=="del"){tr_count--;item_del(fmobj,parseInt(lid));}
}
//函数三【处理添加、修改】
function item_change(fmobj,lid)
{for (i=1;i<=tr_count;i++)
{if (i==lid)
{data1[i]=fmobj.ltd1.value;
data2[i]=fmobj.ltd2.value;
data3[i]=fmobj.ltd3.value;
data4[i]=fmobj.ltd4.value;
data5[i]=fmobj.ltd5.value;
}
else
{data1[i]=item_i("text",eval("fmobj.name"+i.toString(10)),@#@#);
data2[i]=item_i("text",eval("fmobj.age"+i.toString(10)),@#@#);
data3[i]=item_i("text",eval("fmobj.price"+i.toString(10)),@#@#);
data4[i]=item_i("text",eval("fmobj.in_dt"+i.toString(10)),@#@#);
data5[i]=item_i("text",eval("fmobj.out_dt"+i.toString(10)),@#@#);
}
}
item_show(fmobj);
}
//函数四【处理删除】
function item_del(fmobj,lid)
{var j=1;
for (i=1;i<=(tr_count+1);i++)
{if (i!=lid)
{data1[j]=item_i("text",eval("fmobj.name"+i.toString(10)),@#@#);
data2[j]=item_i("text",eval("fmobj.age"+i.toString(10)),@#@#);
data3[j]=item_i("text",eval("fmobj.price"+i.toString(10)),@#@#);
data4[j]=item_i("text",eval("fmobj.in_dt"+i.toString(10)),@#@#);
data5[j]=item_i("text",eval("fmobj.out_dt"+i.toString(10)),@#@#);
//alert("ij:");alert(i);alert(j);alert(data1[j]);
j++;
}
}
item_show(fmobj);
}
//函数五【表格数据的重置、显示】被函数三、四调用。
function item_show(fmobj)//[第一步，静态写表格；第二步，读取数组中的值，显示表格原数据]
{//var fmobj=document.form1;
var str_tr="";
for (i=1;i<=tr_count;i++)
{ td000[i]="<td><input type=\"checkbox\" name=\"check"+i.toString(10)+"\" checked value=\"\" onclick=\"change(@#del@#,"+i.toString(10)+")\"></td>";
td1[i]="<td><input type=\"text\" name=\"name"+i.toString(10)+"\" size=\"10\" value=\"\"></td>";
td2[i]="<td><select name=\"age"+i.toString(10)+"\"><option value=\"23\">23</option><option value=\"24\">24</option><option value=\"25\">25</option><option value=\"26\">26</option><option value=\"27\">27</option><option value=\"28\">28</option><option value=\"29\">29</option></select></td>";
td3[i]="<td><input type=\"text\" name=\"price"+i.toString(10)+"\" size=\"10\" value=\"\"></td>";
td4[i]="<td><input type=\"text\" name=\"in_dt"+i.toString(10)+"\" size=\"10\" value=\"\"></td>";
td5[i]="<td><input type=\"text\" name=\"out_dt"+i.toString(10)+"\" size=\"10\" value=\"\"></td>";
td999[i]="<td><input type=\"button\" name=\"xiugai"+i.toString(10)+"\" value=\"修改\" onclick=\"change_show(@#xiugai@#,"+i.toString(10)+")\"></td>";
tr[i]="<tr>"+td000[i]+td1[i]+td2[i]+td3[i]+td4[i]+td5[i]+td999[i]+"</tr>";
str_tr=str_tr+tr[i];
}
div_table.innerHTML=table1+str_tr+"</table>";
for (i=1;i<=tr_count;i++)
{//eval("fmobj.name"+i.toString(10)+".value=data1["+i.toString(10)+"]");
item_o("text",eval("fmobj.name"+i.toString(10)),data1[i]);
item_o("text",eval("fmobj.age"+i.toString(10)),data2[i]);
item_o("text",eval("fmobj.price"+i.toString(10)),data3[i]);
item_o("text",eval("fmobj.in_dt"+i.toString(10)),data4[i]);
item_o("text",eval("fmobj.out_dt"+i.toString(10)),data5[i]);
}
}
//函数六【表单项从数组中获取值】//是设置表单项(o的状态第四个参数无效)
function item_o(type,iobj,tm)
{ if (type=="text"||"hidden"){iobj.value=tm;}
if (type=="select"){iobj.value=tm;}
if (type=="button"){iobj.value=tm;}
if (type=="radio"){
if (iobj.checked=true){iobj.checked=false;}
else{iobj.checked=true;} }
if (type=="checkbox"){
if (iobj.checked=true){iobj.checked=false;}
else{iobj.checked=true;} }
}
//函数七【数组获取表单项值】//是用此函数去获取表单项值;
function item_i(type,iobj,tm)
{ if (type=="text"||"hidden"){tm=iobj.value;return (tm);}
if (type=="select"){tm=iobj.value;return (tm);}
if (type=="button"){tm=iobj.value;return (tm);}
if (type=="radio"){
if (iobj.checked=true){iobj.checked=false;}
else{iobj.checked=true;} }
if (type=="checkbox"){
if (iobj.checked=true){iobj.checked=false;}
else{iobj.checked=true;} }
}
//注：函数6、7没处理完，哪天有功夫再理它。
//这个作为一个模块，希望能对大家有用。——小乙[2001.5.21]
//-->
</script>
</head>
<body>
<form name="form1" method="post" action="">
<input type="hidden" name="div_mode" value="add"><!-- 标记页面模式 -->
<input type="hidden" name="lid" value="0"><!-- 标记修改状态时，当前被操作tr的序号 -->
<input type="hidden" name="tr_count" value="0"><!-- 本按钮基本无用【当前所有tr项总数】 -->
<table width="80%" border="1" bgcolor="#FFFFFF" bordercolor="#FF9900" cellpadding="2" align="center">
<tr>
<td><input type="text" name="ltd1" size="10" value="姓名"></td>
<td>
<select name="ltd2">
<option value="23" selected>23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="27" selected>27</option>
</select>
</td>
<td><input type="text" name="ltd3" size="10" value="资金￥343"></td>
<td><input type="text" name="ltd4" size="10" value="2001-5-2"></td>
<td><input type="text" name="ltd5" size="10" value="2001-5-7"></td>
<td><input type="button" name="ok" value="完成" onclick="change(document.form1.div_mode.value,document.form1.lid.value)"> </td>
</tr>
</table>
<hr size=1 color=green>
<input type="button" name="Button" value=" 添 加 " onclick="change_show(@#add@#,0)">
<!---------------------------------------------------------------->
<div name="div_table" id="div_table">
<table width="80%" border="1" bgcolor="#FFFFFF" bordercolor="#999999" cellpadding="2" align="center">
<tr>
<td>Check</td>
<td>td1(name)</td>
<td>td2(age)</td>
<td>td3(price)</td>
<td>td4(in_dt)</td>
<td>td5(out_dt)</td>
<td>修改</td>
</tr>
<tr>
<td><input type="checkbox" name="check1" value="on" checked onclick="change(@#del@#,1)"></td>
<td><input type="text" name="name1" size="10" value="chenyanxia"></td>
<td>
<select name="age1">
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27" selected>27</option>
<option value="28">28</option>
<option value="29">29</option>
</select>
</td>
<td><input type="text" name="price1" size="10" value="55RMB"></td>
<td><input type="text" name="in_dt1" size="10" value="2001-4-30"></td>
<td><input type="text" name="out_dt1" size="10" value="2001-5-7"></td>
<td><input type="button" name="xiugai1" value="修改" onclick="change_show(@#xiugai@#,1)"></td>
</tr>
<tr>
<td><input type="checkbox" name="check2" value="on" checked onclick="change(@#del@#,2)"></td>
<td><input type="text" name="name2" size="10" value="chenyx"></td>
<td>
<select name="age2">
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26" selected>26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
</select>
</td>
<td><input type="text" name="price2" size="10" value="55RMB"></td>
<td><input type="text" name="in_dt2" size="10" value="2001-4-30"></td>
<td><input type="text" name="out_dt2" size="10" value="2001-11-12"></td>
<td><input type="button" name="xiugai2" value="修改" onclick="change_show(@#xiugai@#,2)"></td>
</tr>
</table>
</div>
</form>
</body>
</html>
