87,987
社区成员
发帖
与我相关
我的任务
分享javascript简单添加删除记录表单
要点：DOM查询。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
/* 超链接删除员工 */
let alla=document.getElementsByTagName("a");
function dela(){
//let tr=this.parentNode.parentNode;
let mz=this.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML
let qr=confirm("You sure delete the"+mz+"?");//弹出有取消和确认按钮的提示框
if(qr){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
/* 点击超链接会跳转404
在函数末尾return false取消跳转*/
return false;
}
for (var i = 0; i < alla.length; i++) {
alla[i].onclick=dela;
}
let sub=document.getElementById("submit");
sub.onclick=function(){
let tab=document.getElementById("tab");//获取table表单
let newman=document.getElementsByTagName("input");//获取input‘数组’
let tbody=tab.getElementsByTagName("tbody")[0];//获取tbody
let tr=document.createElement("tr");//创建空tr
let td=document.createElement("td");//创建空td
let a=document.createElement("a");//创建a标签
let ad=document.createTextNode("delete");//创建delete文本
for (var i = 0; i <=2; i++) {//将获取到的input数组里面的value传给空的tr，就是input中的输入
tr.innerHTML+="<td>"+newman[i].value+"</td>";
}
a.onclick=dela; //a调用删除函数
a.href="javascript:;";//a加href不然点不起
a.appendChild(ad);//
tr.appendChild(td);
td.appendChild(a)
tbody.appendChild(tr);
}
};
</script>
</head>
<body>
<div style="margin: 0 auto; align-items: center;text-align: center; width:218px;height: auto;" id="d1">
<table id="tab" border="" cellspacing="" cellpadding="">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
</tr>
<tr id="per1">
<td id="name">大司</td>
<td id="eml">dasima@163.com</td>
<td id="sal">5000$</td>
<td id="del"><a href="delete">delete</a></td>
</tr>
<tr id="per1">
<td id="name">小C</td>
<td id="eml">yuxiaoC@163.com</td>
<td id="sal">5000$</td>
<td id="del"><a href="delete">delete</a></td>
</tr>
</table>
</div>
<div id="d2"style="width: 300px;height: auto;margin: 0 auto;">
<h2>添加新员工</h2>
Name<input type="text" name="" id="name" value="" /><br>
Email <input type="email" name="" id="email" value="" /><br>
Salary<input type="text" name="" id="salary" value="" /><br>
<button type="button"id="submit"style="text-align: center;margin: 0 autos;">Submit</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
window.onload=function(){
/* 超链接删除员工 */
let alla=document.getElementsByTagName("a");
function dela(){
//let tr=this.parentNode.parentNode;
let mz=this.parentNode.parentNode.getElementsByTagName("td")[0].innerHTML
let qr=confirm("You sure delete the"+mz+"?");//弹出有取消和确认按钮的提示框
if(qr){
this.parentNode.parentNode.parentNode.removeChild(this.parentNode.parentNode);
}
/* 点击超链接会跳转404
在函数末尾return false取消跳转*/
return false;
}
for (var i = 0; i < alla.length; i++) {
alla[i].onclick=dela;
}
let sub=document.getElementById("submit");
sub.onclick=function(){
let tab=document.getElementById("tab");//获取table表单
let newman=document.getElementsByTagName("input");//获取input‘数组’
let tbody=tab.getElementsByTagName("tbody")[0];//获取tbody
let tr=document.createElement("tr");//创建空tr
let td=document.createElement("td");//创建空td
let a=document.createElement("a");//创建a标签
let ad=document.createTextNode("delete");//创建delete文本
for (var i = 0; i <=2; i++) {//将获取到的input数组里面的value传给空的tr，就是input中的输入
tr.innerHTML+="<td>"+newman[i].value+"</td>";
}
a.onclick=dela; //a调用删除函数
a.href="javascript:;";//a加href不然点不起
a.appendChild(ad);//
tr.appendChild(td);
td.appendChild(a)
tbody.appendChild(tr);
}
};
</script>
</head>
<body>
<div style="margin: 0 auto; align-items: center;text-align: center; width:218px;height: auto;" id="d1">
<table id="tab" border="" cellspacing="" cellpadding="">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
</tr>
<tr id="per1">
<td id="name">大司</td>
<td id="eml">dasima@163.com</td>
<td id="sal">5000$</td>
<td id="del"><a href="delete">delete</a></td>
</tr>
<tr id="per1">
<td id="name">小C</td>
<td id="eml">yuxiaoC@163.com</td>
<td id="sal">5000$</td>
<td id="del"><a href="delete">delete</a></td>
</tr>
</table>
</div>
<div id="d2"style="width: 300px;height: auto;margin: 0 auto;">
<h2>添加新员工</h2>
Name<input type="text" name="" id="name" value="" /><br>
Email <input type="email" name="" id="email" value="" /><br>
Salary<input type="text" name="" id="salary" value="" /><br>
<button type="button"id="submit"style="text-align: center;margin: 0 autos;">Submit</button>
</div>
</body>
</html>
...全文
请发表友善的回复…
发表回复
