【转载】JavaScript实例06 | 动态表格
题目:
使用jQuery实现可以动态添加数据的表格,如图所示:
输入完成数据点击添加,可以将数据追加到表格最后一行。点击表格中的删除,可以删除本行的数据。
思路:
一.添加:
1. 给添加按钮绑定单击事件
2. 获取文本框的内容
3. 创建td,设置td的文本为文本框的内容。
4. 创建tr
5. 将td添加到tr中
6. 获取table,将tr添加到table中
二.删除:
1.确定点击的是哪一个超链接
<a href="javascript:void(0);" onclick="delTr(this);" >删除</a>
2.怎么删除?
removeChild():通过父节点删除子节点
实现步骤:
01基础HTML代码和CSS代码
HTML代码如下:
<div id="app">
<div>
<input type="text" id="id" placeholder="请输入编号" />
<input type="text" id="name" placeholder="请输入姓名" />
<input type="text" id="gender" placeholder="请输入性别" />
<input type="button" value="添加" id="btn_add" />
</div>
<table>
<caption>
明星信息一览表
</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td>刘德华</td>
<td>男</td>
<td>
<a href="javascript:void(0);" onclick="deleteTr(this);">删除</a>
</td>
</tr>
<tr>
<td>2</td>
<td>张学友</td>
<td>男</td>
<td>
<a href="javascript:void(0);" onclick="deleteTr(this);">删除</a>
</td>
</tr>
<tr>
<td>3</td>
<td>郭富城</td>
<td>男</td>
<td>
<a href="javascript:void(0);" onclick="deleteTr(this);">删除</a>
</td>
</tr>
</table>
</div>
CSS代码如下:
table {
border: 1px solid;
margin: auto;
width: 600px;
border-collapse: collapse;
}
td, th {
text-align: center;
border: 1px solid;
}
div {
text-align: center;
margin: 50px;
}
02JavaScript代码
document.getElementById("btn_add").onclick = function () {
//2.获取文本框的内容
var id = $("#id").val();
var name = $("#name").val();
var gender = $("#gender").val();
//获取table
var table = $("table");
//追加一行
table.html( table.html() +
"<tr>\n" +
" <td>" +
id +
"</td>\n" +
" <td>" +
name +
"</td>\n" +
" <td>" +
gender +
"</td>\n" +
' <td><a href="javascript:void(0);" onclick="deleteTr(this);" >删除</a></td>\n' +
" </tr>");
};
//删除方法
function deleteTr(obj) {
var table = obj.parentNode.parentNode.parentNode;
var tr = obj.parentNode.parentNode;
table.removeChild(tr);
}