第一步
- 创建文本框与按钮
效果图
<div>
<input type="text" id="id" value="" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
第二步
- 创建表格
- 添加初始数据
<table id="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="del(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td> //连接到del函数
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table>
效果图
第三步
- JS代码
- 获取用户输入的值
//添加按钮的函数 document.getElementById("btn_add").onclick=function () { var id=document.getElementById("id").value; //通过id获取id=“id”的编辑框的值 var name=document.getElementById("name").value; //通过id获取id=“name”的编辑框的值 var gender=document.getElementById("gender").value;
- 把获取的值便问文本节点对象
var text_id=document.createTextNode(id);//把编号变成文本节点对象 var text_name=document.createTextNode(name); var text_gender=document.createTextNode(gender);
- 创建列标签
var td_id=document.createElement("td"); var td_name=document.createElement("td"); var td_gender=document.createElement("td"); var td_c=document.createElement("td");
- 把文本节点作为子类添加到列标签上
td_id.appendChild(text_id); td_name.appendChild(text_name); td_gender.appendChild(text_gender); td_c.innerHTML="<a href='javascript:void(0)' οnclick='del(this)''>删除</a>"; //第四列连接有del函数
- 创建并将td标签添加到tr上
var tr=document.createElement("tr"); tr.appendChild(td_id); tr.appendChild(td_name); tr.appendChild(td_gender); tr.appendChild(td_c);
- 获取table标签并添加tr标签
var table=document.getElementById("table"); table.appendChild(tr);
- del函数
var function del(e) { //通过超链接a节点对象获取 父元素的父元素。。。tr和table var table=e.parentNode.parentNode.parentNode; var tr=e.parentNode.parentNode; table.removeChild(tr); }
运行效果
全部代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态表格</title>
<style>
table{
border: 1px solid;
margin: auto;
width: 500px;
}
td,th{
text-align: center;
border: 1px solid;
}
div{
text-align: center;
margin: 50px;
}
</style>
</head>
<body>
<div>
<input type="text" id="id" value="" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="gender" placeholder="请输入性别">
<input type="button" value="添加" id="btn_add">
</div>
<table id="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="del(this)">删除</a></td>
</tr>
<tr>
<td>2</td>
<td>任我行</td>
<td>男</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
<tr>
<td>3</td>
<td>岳不群</td>
<td>?</td>
<td><a href="javascript:void(0)" onclick="del(this)">删除</a></td>
</tr>
</table>
</body>
<script>
/*1.获取用户输入的编号值*/
document.getElementById("btn_add").onclick=function ()
{
var id=document.getElementById("id").value;
var name=document.getElementById("name").value;
var gender=document.getElementById("gender").value;
console.log(id);
var text_id=document.createTextNode(id);//把编号变成文本节点对象
var text_name=document.createTextNode(name);
var text_gender=document.createTextNode(gender);
var td_id=document.createElement("td");
var td_name=document.createElement("td");
var td_gender=document.createElement("td");
var td_c=document.createElement("td");
td_id.appendChild(text_id);
td_name.appendChild(text_name);
td_gender.appendChild(text_gender);
td_c.innerHTML="<a href='javascript:void(0)' οnclick='del(this)''>删除</a>";
var tr=document.createElement("tr");
tr.appendChild(td_id);
tr.appendChild(td_name);
tr.appendChild(td_gender);
tr.appendChild(td_c);
var table=document.getElementById("table");
table.appendChild(tr);
}
/*2.删除 父节点对象.removeChild(子节点对象);
a标签的href属性:如果是空字符串:表示跳转到当前页面。功能就是刷新当前页面
*/
function del(e) {
//通过超链接a节点对象获取 父元素的父元素。。。tr和table
var table=e.parentNode.parentNode.parentNode;
var tr=e.parentNode.parentNode;
table.removeChild(tr);
}
</script>
</html>