javascript创建动态表单的方法

更新时间：2015年07月25日 18:00:50 作者：紅顏為君笑

这篇文章主要介绍了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程序设计有所帮助。

您可能感兴趣的文章:

利用JavaScript做数独的完整实现过程
数独游戏是在一个9*9的方格中进行填数字的游戏,需要满足的规则是每行每列和每个子九宫格都是1~9的不重复数字,下面这篇文章主要给大家介绍了关于如何利用JavaScript做数独的相关资料,需要的朋友可以参考下
2021-09-09
js实现多图左右切换功能
这篇文章主要介绍了js实现多图左右切换功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-08-08
基于iscroll.js实现下拉刷新和上拉加载效果
这篇文章主要为大家详细介绍了基于iscroll.js实现下拉刷新和上拉加载效果,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-11-11
js 创建书签小工具之理论
书签小工具（Bookmarklets）是一个非常棒的javascript代码小片断伪装成的小应用，它驻留在你的浏览器里并为网页提供额外的功能。这里我们将研究如何从头开始创建一个书签小工具及一些最佳实践的建议。
2011-02-02
JS组件系列之使用HTML标签的data属性初始化JS组件
这篇文章主要介绍了JS组件系列之使用HTML标签的data属性初始化JS组件,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-09-09
认识延迟时间为0的setTimeout
由 John Resig 的 How JavaScript Timers Work 可以知道，现有的 JavaScript 引擎是单线程处理任务的。它把任务放到队列中，不会同步去执行，必须在完成一个任务后才开始另外一个任务。
2008-05-05
来自qq的javascript面试题
请指出一下代码的性能问题，并经行优化。
2010-07-07
基于Bootstrap实现的下拉菜单手机端不能选择菜单项的原因附解决办法
小编使用bootstrap做的下拉菜单在电脑浏览器中可以正常使用，在手机浏览器中能弹出下拉列表却不能选择列表中的菜单项，怎么回事，如何解决呢？下面小编给大家分享下具体原因及解决办法，一起看下吧
2016-07-07
javascript中的nextSibling使用陷(da)阱(keng)
关于HTML/XML节点的问题，在IE中nextSibling不会返回文本节点，而chrome或者firefox等会返回文本节点
2014-05-05
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
通过 bootstrap-table 的Column 配置项中的formatter，将获取到的数据转换为包含数据的 select 控件。然后根据用户选择项更新对应单元格数据，最后通过getallselection方法获取所选行数据
2017-07-07

javascript创建动态表单的方法

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具