使用target.innerHTML="new content";
动态改变网页内容。
例如,动态添加成员信息。
下面是表格动态添加成员的例子
html
<table id="personinfo">
<thead>
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>hello</td>
<td>hello</td>
<td>hello</td>
<td><input type="button" value="删除" name="remove"></td>
</tr>
<tr>
<td>world</td>
<td>world</td>
<td>world</td>
<td><input type="button" value="删除" name="remove"></td>
</tr>
</tbody>
</table>
<div class="newper">
<div>添加新的员工</div>
<div id="name">
<span>name: </span>
<input type="text" name="in-name">
</div>
<div id="email">
<span>email: </span>
<input type="text" name="in-email">
</div>
<div id="salary">
<span>salary:</span>
<input type="text" name="in-salary">
</div>
<input type="button" value="添加" id="btnadd">
</div>
css
table{
border: 1px solid black;
margin: 50px auto;
border-collapse: collapse;
}
table th,
table td{
border: 1px solid black;
text-align: center;
padding: 2px 3px;
}
.newper{
margin: 0 auto;
border: 1px solid black;
width: 240px;
padding: 10px;
text-align: center;
}
JavaScript
function myClickByID( id , fun ){
var btn=document.getElementById(id);
btn.onclick=fun;
}
window.onload=function () {
myClickByID("btnadd",function () {
var name=document.getElementsByName("in-name")[0];
var email=document.getElementsByName("in-email")[0];
var salary=document.getElementsByName("in-salary")[0];
var tr=document.createElement("tr");
//可以在标签中间使用变量
tr.innerHTML="<td>"+name.value+"</td>\n"+
"<td>"+email.value+"</td>\n"+
"<td>"+salary.value+"</td>\n"+
"<td><input type=\"button\" value=\"删除\" name=\"remove\"></td> ";
var person=document.getElementById("personinfo");
// console.log();
person.children[1].appendChild(tr);
remove=document.getElementsByName("remove");
for (var i=0;i<remove.length;++i){
remove[i].onclick=function () {
if (confirm("确定删除吗?")==true)
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
});
var remove=document.getElementsByName("remove");
for (var i=0;i<remove.length;++i){
remove[i].onclick=function () {
// console.log(this.parentNode.parentNode);
if (confirm("确定删除吗?")==true)
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
}
}
结果
- 原始
效果
代码
- 添加一个新的成员
效果
代码
在没有改变tbody的其他的内容前提下,实现网页内容的动态添加,效率较高。