动态增加表单元素

最新推荐文章于 2024-10-11 17:39:47 发布

penghuaiyi2008

最新推荐文章于 2024-10-11 17:39:47 发布

阅读量87

点赞数

分类专栏： JavaScript总结文章标签： javascript ViewUI

JavaScript总结专栏收录该内容

44 篇文章 0 订阅

订阅专栏


<html>
<head>
<title>增加学生信息页面</title>
<script type="text/javascript">
  var count=1;    //学生数量
  function  addRows(){
     var tab=document.getElementById("student");
	 alert(tab.rows.length);
	 //第一行
	 var tr0=tab.insertRow(tab.rows.length);
	 var td00=tr0.insertCell();
	 var td01=tr0.insertCell();
     td00.innerHTML="学生信息";
	 td00.colSpan="2";
	 td01.innerHTML="<input type=button value=删除学生 onClick=deleteRows(this.parentElement.parentElement)>";
	 td01.colSpan="2";
     td01.align="right";

	  //第二行
      var tr1=tab.insertRow(tab.rows.length);
	  var td10=tr1.insertCell();
	  var td11=tr1.insertCell();
	  var td12=tr1.insertCell();
	  var td13=tr1.insertCell();
	  td10.innerHTML="学号";
	  td11.innerHTML="<input type=text id=num"+count+"  name=num"+count+" >";
	  td12.innerHTML="姓名";
	  td13.innerHTML="<input type=text id=name"+count+" name=name"+count+" >";

	  //第三行
      var tr2=tab.insertRow(tab.rows.length);
	  var td20=tr2.insertCell();
	  var td21=tr2.insertCell();
	  var td22=tr2.insertCell();
	  var td23=tr2.insertCell();
	  td20.innerHTML="性别";
	  td21.innerHTML="<input type=radio id=sex"+count+" name=sex"+count+" value=男 checked >男 <input type=radio id=sex"+count+" name=sex"+count+" value=女 >女";
	  td22.innerHTML="年龄";
	  td23.innerHTML="<input type=text id=age"+count+" name=age"+count+" >";

       count=count+1;

  }

  function checkForm(){
     for(var i=0;i<count;i++){

    /*  var num=document.getElementById("num"+i).value;
	  var name=document.getElementById("name"+i).value;
	  var sex=document.getElementById("sex"+i).value;
	  var age=document.getElementById("age"+i).value;*/

	  var onForm=document.forms[0];
	  var num=onForm['num'+i].value;
	  var name=onForm['name'+i].value;
	  var sex=onForm['sex'+i].value;
	  var age=onForm['age'+i].value;

	 // alert(num+" "+name+" "+sex+" "+age);

      document.getElementById("count").value=count;

	 }
  }

  function deleteRows(src){
     var tab=src.parentElement;
	 for(var i=0;i<3;i++)
	    tab.deleteRow();

	 count=count-1;
  }
</script>
</head>
<body>
<input type="button" name="button" value="增加学生" onClick="addRows()">
<form name="form1" method="post" action="">
学生总数：<input type="text" id="count" name="count" value="">
<table id="student" align="center" width="60%" border="1" cellspacing="0" cellpadding="0">
   <tr>
     <td colspan="4">学生信息</td>
   </tr>
   <tr>
     <td>学号</td>
	 <td><input type="text" id="num0" name="num0"></td>
	 <td>姓名</td>
	 <td><input type="text" id="name0" name="name0"></td>
   </tr>
    <tr>
     <td>性别</td>
	 <td><input type="radio" id="sex0" name="sex0" value="男" checked>男 
	 <input type="radio" id="sex0" name="sex0" value="女">女</td>
	 <td>年龄</td>
	 <td><input type="text" id="age0" name="age0"></td>
   </tr>
</table>
<input type="button" value="提交" onClick="return checkForm()">
<input type="reset" value="重置">
</form>
</body>
</html>