<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>
分享到：
相关推荐
一、动态添加表单元素 1. 创建新元素：首先，我们需要使用JavaScript创建新的HTML元素。例如，如果要添加一个文本输入框，可以使用`document.createElement('input')`来创建一个`<input>`标签。接着，可以通过`...
在JavaScript中，动态添加表单元素是一种常见的需求，特别是在构建交互式Web应用时。`appendChild`方法是DOM操作中的关键部分，它允许我们在文档结构中插入新的元素。以下将详细介绍如何使用JavaScript动态添加表单...
7. **AJAX**：如果希望在不刷新整个页面的情况下动态增加表单元素，可以利用AJAX技术，通过JavaScript发送异步请求到服务器，获取并插入新元素。 8. **响应式设计**：在移动设备上，动态增加表单元素也需要考虑布局...
在传统的HTML表单中，我们通常会预先定义好所有的表单元素，但在某些情况下，比如用户需要根据需求自定义输入项，动态添加表单就显得非常实用。AngularJS通过其数据绑定和指令系统为这一功能提供了便利。 ### 1. ...
当我们谈论“jQuery动态添加表单”时，我们是指利用jQuery的API来在网页上创建和插入新的表单元素，而无需预先在HTML中定义它们。这个功能在构建动态交互式页面时特别有用，比如用户可以按需添加更多的输入字段或...
本资源"jQuery表单元素动态增加删除代码.zip"聚焦于一个特定的应用场景：通过jQuery实现表单元素的动态添加与删除功能。这种功能在现代Web应用中非常常见，例如在线表单填写、购物车管理等，它允许用户根据需要...
动态表单生成通常是指根据实际需求，在运行时动态创建表单元素。在Vue.js中，可以通过v-for指令循环渲染模板，从而实现表单的动态生成。v-for指令基于一个数组生成对应数量的DOM结构，这意味着可以预先设置一个基本...
1. **动态添加表单元素**： 使用jQuery，可以方便地通过`append()`或`insertAfter()`等方法将新的表单元素插入到已存在的HTML结构中。例如，如果要添加一个新的文本输入框，可以写入如下代码： ```javascript var...
二、动态添加表单元素 在JavaScript中，我们可以利用DOM（文档对象模型）API来动态创建和插入HTML元素。例如，当用户点击“添加新事项”按钮时，可以通过以下步骤创建一个新的表单行： 1. 创建新的`<li>`元素，...
对于动态添加表单元素，这些方法非常实用。 四、动态添加表单元素 在表单中，可以利用jQuery动态生成表单元素。例如，如果要添加一个新的输入框，可以使用以下代码： ```javascript var newInput = $("<input>", {...
本文将详细介绍如何利用JavaScript实现动态添加表单元素，并提供一个具体示例，涉及的主要函数包括`getElementById()`、`parentNode`、`cloneNode()`、`removeAttribute()`、`innerHTML`以及`appendChild()`。...
- **动态生成**：开发者可以通过编程方式动态生成表单元素，例如使用`Ext.Component`或`Ext.form.field.Base`的子类，根据需求动态添加或移除表单字段。 - **数据绑定**：EXT4.3支持双向数据绑定，允许表单字段与...
动态添加表单是Web开发中常见的一种功能，它允许用户在运行时根据需求自定义或增加表单元素，为用户提供更灵活的交互体验。在网页设计中，这种技术尤其适用于数据输入多变或者需要用户自由组合信息的情况。下面将...
html无限添加表单元素的代码,代码很详细一看就明白用于无限添加表单后台循环接受一下
Iview的Table组件支持动态添加和删除行，结合Vue的数组操作方法（push、pop、splice等）可以轻松实现这一功能。同时，可以设置一个弹窗，在其中进行更复杂的单元格编辑。 5. **表单验证**：Vue和Iview都提供了强大...
在使用layui这一前端框架时，有时会遇到动态添加或修改表单元素后，这些元素无法正常显示或功能失效的问题。这个问题通常发生在使用layui Form模块进行表单操作时，因为layui的Form模块在页面加载时会一次性渲染所有...
本项目“Vue ~ element-ui 动态表单验证”是针对Vue和Element-UI的一个应用场景，主要关注的是动态表单验证以及表单元素的增删操作。下面我们将详细探讨这些知识点。 1. Vue.js动态表单验证： Vue.js允许开发者通过...
在动态添加表单的过程中，我们经常需要创建新的表单元素，如`<input>`、`<select>`或`<textarea>`，并根据需要设置它们的属性，如`name`、`value`或`placeholder`。使用`document.createElement()`方法创建元素，...