相思资源网 Design By www.200059.com
本文实例讲述了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程序设计有所帮助。
相思资源网 Design By www.200059.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
相思资源网 Design By www.200059.com
暂无javascript创建动态表单的方法的评论...
《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线
暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。
艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。