`

动态添加表记录

HTML 
阅读更多 
<html>
	<head>
	<title>js练习<title>
	<style>
		.dall{
		height:600;
		width:600;
		font-size:12pt;
		color:purple;
		background:lightblue;
		}
		.dmain{
		width:450;
		background:yellow;
		}
		.dfoot{
		width:450;
		background:green;
		}
	</style>
		<script language="javascript">
			function addrow(){
				var sid = document.getElementById('id');
				var sname = document.getElementById('name');
				var ssalary = document.getElementById('salary');
				var tb = document.getElementById('tb');
				var tr = document.createElement('tr');
				var tid = document.createElement('td');
				tid.appendChild(document.createTextNode(sid.value));	
				tr.appendChild(tid);	
				var tname = document.createElement('td');	
				tname.appendChild(document.createTextNode(sname.value));	
				tr.appendChild(tname);	
				var tsal = document.createElement('td');
				tsal.appendChild(document.createTextNode(ssalary.value));	
				tr.appendChild(tsal);
				tb.appendChild(tr);	
			}
			function reset(){
				var sid = document.getElementById('id');
				sid.value='';
				var sname = document.getElementById('name');
				sname.value='';
				var ssalary = document.getElementById('salary');
				ssalary.value='';
			}
		</script>
	</head>
	<body>
	<h2 style="color:blue">js表单练习</h2>
	<hr>
		<div class="dall">
			<div class="dmain">
				<center><h3>员工收入表</h3><center>
				<table border='1' width='450'>
					<thead>
						<tr>
							<th>id</th>
							<th>name</th>
							<th>salary</th>
						</tr>
					</thead>
					<tbody id="tb"><tbody>
					<tfoot></tfoot>
				</table>
			</div>
			<div class="dfoot">
				<table>
					<tr>
						<td>id:</td>
						<td><input id="id" type="text" name="id"/></td>
					</tr>
					<tr>
						<td>name:</td>
						<td><input id="name" type="text" name="name"/><br></td>
					</tr>
					<tr>
						<td>salary:</td>
						<td><input id="salary" type="text" name="salary"/></td>
					</tr>
					<tr>
						<td><input type="button" value="addRow" 
						onclick="addrow()"/></td>
						<td><input type="button" value="reset" onclick="reset();"/></td>
					</tr>
				</table>			
			</div>
		</div>
	</body>
</html>
分享到：
| 关联下拉列表代码示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics