javascript创建动态表单的方法

本文实例讲述了javascript创建动态表单的方法。分享给大家供大家参考。具体实现方法如下：
<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Content-Language" content="zh-CN" /><meta name="Keywords" content="" /><meta name="Description" content="" /><title></title><style>#tab {border:1px solid #aaa;border-collapse:collapse;width:80%;}#tab th{border:1px solid #aaaaaa;background:#ECE9D8;border-collapse:collapse;padding:5px;text-align:left;}#tab td{border:1px solid #d8d8d8;border-collapse:collapse;padding:5px;}.txt{border:1px solid #888;background:#ECE9D8;}.checkBg{border:1px solid #aaaaaa;background:#ECE9D8;}.checkTxt{border:1px solid #aaa;background:##d8d8d8;}.button {border:1px solid #888;margin:5px 0px;width:80px;background:#ECE9D8;height:22px;line-height:22px;}</style><script language="javascript" type="text/javascript">function $（id） {return document.getElementById（id）;}function $F（name）{return document.getElementsByTagName（name）;}function add（）{var otr = document.getElementById（"tab"）.insertRow（-1）;var checkTd=document.createElement（"td"）;checkTd.innerHTML = "<input type="checkbox" class="check" onclick="ccolor（）" name="checkItem">";var otd1 = document.createElement（"td"）;otd1.innerHTML = "<input type="text" class="txt" name="infoName_txt" id="infoName_txt"+（$（"tab"）.rows.length-1）+"" maxlength="30" value=""/>";var otd2 = document.createElement（"td"）;otd2.innerHTML = "<input type="text" class="txt" name="infoValue_txt" id="infoValue_txt"+（$（"tab"）.rows.length-1）+"" maxlength="30" value=""/>";otr.appendChild（checkTd）;otr.appendChild（otd1）; otr.appendChild（otd2）; }function ccolor（）{var c1 = document.getElementsByName（"checkItem"）;for（var i=0; i<c1.length; i++）if（c1[i].checked）{ c1[i].parentNode.parentNode.className="checkBg"; c1[i].parentNode.nextSibling.firstChild.className="checkTxt"; c1[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}else { c1[i].parentNode.parentNode.className="";c1[i].parentNode.nextSibling.firstChild.className=""; c1[i].parentNode.nextSibling.nextSibling.firstChild.className="";}}function del（）{var c = document.getElementsByName（"checkItem"）;var idArray = new Array（）;for（var i=0; i<c.length; i++）if（c[i].checked）idArray.push（i）;var rowIndex;var nextDiff =0;for（j=0;j< idArray.length;j++）{rowIndex = idArray[j]+1-nextDiff++;document.getElementById（"tab"）.deleteRow（rowIndex）;}}function save（）{var postString = $（"postString"）; var checkboxs = document.getElementsByName（"checkItem"）; var ttab = document.getElementsByName（"infoName_txt"）; var tt2 = document.getElementsByName（"infoValue_txt"）; var idArray = new Array（）; for（i=0;i<checkboxs.length;i++）{ idArray.push（ttab[i].value + "|" + tt2[i].value）; } postString.value = idArray.join（"-"）; alert（postString.value）;}function alldell（）{var des =document.getElementsByName（"checkItem"）;for（var i=0;i<des.length;i++）{if（des[i].checked=document.getElementById（"delall"）.checked）{des[i].parentNode.parentNode.className="checkBg";des[i].parentNode.nextSibling.firstChild.className="checkTxt";des[i].parentNode.nextSibling.nextSibling.firstChild.className="checkTxt";}else{ des[i].parentNode.parentNode.className=""; des[i].parentNode.nextSibling.firstChild.className=""; des[i].parentNode.nextSibling.nextSibling.firstChild.className="";}}} </script></head><body><input name="addv_btn" id="addv_btn" type="button" class="button" onClick="add（）;" value="add" /> <input name="del_btn" id="del_btn" type="button" class="button" onClick="del（）;" value="del" /> <input name="save" id="save" type="button" class="button" onClick="save（）;" value="save" /><br><table id="tab" ><tr><th width="5%"><input type="checkbox" id="delall" onclick="alldell（）"></td><th width="40%">Name</td><th width="55%">value</td> </tr></table><p><input type="text" name="postString" id="postString"> </p></body></html>
希望本文所述对大家的javascript程序设计有所帮助。