表格操作
2019-03-31 本文已影响0人
垃圾桶边的狗
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function save_msg(){
// 拿到我们的用户输入信息
var id_input = document.getElementById("user_id").value;
var name_input = document.getElementById("user_name").value;
var user_phone = document.getElementById("user_phone").value;
var id_td = document.createElement("td");
id_td.innerText = id_input;
//创建对应td
var name_td = document.createElement("td");
name_td.innerText = name_input;
var tel_td = document.createElement("td");
tel_td.innerText = user_phone;
//需要给删除的那个td添加样式和相应方法
var operate_td = document.createElement("td");
operate_td.innerText = "删除";
operate_td.style.color = "blue";
operate_td.onclick = function(){
var select_td = this;
// 通过使用parentNode 拿到我们的一行 然后调用remove删除
select_td.parentNode.remove();
}
//创建tr 行标签 将所有的td追加到tr内
var my_tr = document.createElement('tr');
my_tr.appendChild(id_td);
my_tr.appendChild(name_td);
my_tr.appendChild(tel_td);
my_tr.appendChild(operate_td);
//获取table， 添加tr
var my_table = document.getElementsByTagName('table')[0];
my_table.appendChild(my_tr);
}
</script>
</head>
<body>
ID:<input type="text" id="user_id" />
姓名: <input type="text" id="user_name" />
电话: <input type="text" id="user_phone" />
<button onclick="save_msg()">保存</button>
<table border="1px">
<tr>
<td>Id</td>
<td>Name</td>
<td>Tel</td>
<td>操作</td>
</tr>
</table>
</body>
</html>
