<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>
详细解决方案
动态增添表记录
热度：81 发布时间：2012-11-04 10:42:41.0
相关解决方案