一个简单的添加删除表哥js代码
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#sss{
margin: 0 auto;
border: 5px solid #7FFFD4;
width: 300px;
height: 300px;
}
#in{
height: 80px;
width: 298px;
border: 1px solid deepskyblue;
margin-bottom: 10px;
margin: 0 auto;
}
#inpu{
float: left;
}
#submission{
}
body{
text-align: center;
}
</style>
<script>
window.onload=function(){
function on(){ //点击删除的事件
var tr=this.parentNode.parentNode;//获取到tr节点
//var td=tr.getElementsByTagName("td")[0].innerHTML;//获取要删除的名字
var td=tr.children[0].innerHTML;//childeren遍历类名,获取tr第一个的td名字
var con=confirm("确认删除【"+td+"】英雄嘛")//confirm是否删除,会提示出2个按钮,确定和取消
if(con){
tr.parentNode.removeChild(tr);//用tr的父节点来删除tr
}
return false;//取消超链接的默认行为,不然会出现跳转
}
var onc=document.getElementsByTagName("a"); //获取a类名
for(i=0;i<onc.length;i++){ //用循环给每个按钮添加一个删除的事件
onc[i].onclick=on;
}
var submission=document.getElementById("submission");//获取提交 按钮
submission.onclick=function(){
var te=document.getElementsByTagName("input"); //获取输入框的值
var tr=document.createElement("tr"); //创建一个tr节点
for(var i=0;i<te.length;i++){
var td=document.createElement("td"); //创建一个td节点
var td2=document.createTextNode(te[i].value) //循环的把value的值给td2
td.appendChild(td2)// 把td2添加到td中
tr.appendChild(td);//把td添加到tr中
//添加删除点击
}
var a=document.createElement("a"); //创建一个a节点
a.href="";//给a节点添加一个href,点击按钮一样
a.onclick=on;//给创建的a添加一个点击删除事件
var text1=document.createTextNode("删除") //创建一个删除的文本节点
a.appendChild(text1)//把删除的文本节点给刚创建的a节点
var td3=document.createElement("td");//创建一个td节点
td3.appendChild(a);//把a给td节点
tr.appendChild(td3);//把td节点给tr
var employeeTable=document.getElementById("employeeTable")//获取employeeTable
var tbody =document.getElementsByTagName("tbody")[0];//把上面的给tbody,因为游览器会默认创建一个tbody
//var tab=document.getElementById("tab");
tbody.appendChild(tr); //把上面创建的tr加到tbody中,就是用来的table
}
}
</script>
</head>
<body>
<div id="sss">
<table id="tab" border="2px" bordercolor="red" width="300px" align="center">
<th>英雄名字</th>
<th>等级</th>
<th>年龄</th>
<th>操作</th>
<tr >
<td>德玛西亚</td>
<td>10</td>
<td>33</td>
<td><a href="">删除</a></td>
</tr>
<tr >
<td>剑豪</td>
<td>13</td>
<td>23</td>
<td><a href="">删除</a></td>
</tr>
<tr >
<td>小娜</td>
<td>18</td>
<td>18</td>
<td><a href="">删除</a></td>
</tr>
</table>
</div>
<div id="in">
<div id="inpu">
<form>
名字<input type="text" /><br>
等级<input type="text" /><br>
年龄<input type="text" />
</form>
</div>
<div id="submission"><button>提交</button></div>
</div>
</body>
</html>
标签：删除,tr,parentNode,js,添加,var,td,margin,表哥 来源： https://blog.csdn.net/weixin_43341760/article/details/94589508