javascript建立動態表單的方法，javascript建立表單

javascript建立動態表單的方法，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程式設計有所協助。