45fan.com - 路饭网

搜索: 您的位置主页 > 电脑频道 > 编程代码 > 阅读资讯:javascript如何创建动态表单?

javascript如何创建动态表单?

2015-08-12 06:22:42 来源:www.45fan.com 【

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程序设计有所帮助。


本文地址:http://www.45fan.com/bcdm/17493.html
Tags: 动态 JavaScript 创建
编辑:路饭网
推广内容
推荐阅读
热门推荐
推荐文章
关于我们 | 联系我们 | 友情链接 | 网站地图 | Sitemap | App | 返回顶部