重写表格－－[js源码]你如果用的上，这就是好东西.<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> |
|
|
