当前位置:小鱼儿玄机二站 > 关于计算机 > JavaScript动态创立form表单并交由的兑现格局,ja

JavaScript动态创立form表单并交由的兑现格局,ja

文章作者:关于计算机 上传时间:2019-09-03

本文实例汇报了JavaScript动态创造form表单并付诸的兑现方式。分享给大家供大家仿照效法,具体如下:

本文实例陈说了javascript制造动态表单的艺术。分享给咱们供大家仿效。具体贯彻情势如下:

页面布局某个复杂的状态下,可能须求在页面中动态创设多少个 form,JavaScript 成立 form 演示如下:

<!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 构建一个 form 
function MakeForm() 
{ 
  // 创建一个 form 
  var form1 = document.createElement("form"); 
  form1.id = "form1"; 
  form1.name = "form1"; 
  // 添加到 body 中 
  document.body.appendChild(form1); 
  // 创建一个输入 
  var input = document.createElement("input"); 
  // 设置相应参数 
  input.type = "text"; 
  input.name = "value1"; 
  input.value = "1234567"; 
  // 将该输入框插入到 form 中 
  form1.appendChild(input); 
  // form 的提交方式 
  form1.method = "POST"; 
  // form 提交路径 
  form1.action = "/servlet/info"; 
  // 对该 form 执行提交 
  form1.submit(); 
  // 删除该 form 
  document.body.removeChild(form1); 
} 

愿意本文所述对大家的javascript程序设计有所帮助。

调用 MakeForm 后,马上创制二个 Form,并付出,然后移除该 Form。

您或然感兴趣的篇章:

  • js form action动态修改章程
  • JavaScript动态创设form表单并交由的达成格局
  • 用JS动态改变表单form里的action值属性的二种格局
  • js动态生成form 并用ajax形式交给的兑现形式
  • Js为表单动态增进节点内容的主意
  • javascript贯彻的动态增加表单成分input,button等(appendChild)
  • javascript写的一个表单动态输入提醒的代码
  • JavaScript落实动态增Gavin件域表单
  • JavaScript贯彻动态增添Form表单成分的点子亲自去做

盼望本文所述对大家JavaScript程序设计具备帮忙。

您可能感兴趣的小说:

  • js form action动态修改章程
  • 用JS动态退换表单form里的action值属性的两种办法
  • js动态生成form 并用ajax方式交给的落实况势
  • Js为表单动态增加节点内容的艺术
  • javascript达成的动态增添表单成分input,button等(appendChild)
  • javascript写的二个表单动态输入提醒的代码
  • JavaScript贯彻动态增Gavin件域表单
  • javascript创制动态表单的措施
  • JavaScript贯彻动态增多Form表单成分的不二诀要现身说法

本文由小鱼儿玄机二站发布于关于计算机,转载请注明出处:JavaScript动态创立form表单并交由的兑现格局,ja

关键词: