javascript创建动态表单的方法

前端技术 2023/09/04 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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/10526

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案