<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>案例动态表格</title>
<style>
div{
text-align: center;
width: 840px;
margin: auto;
border: solid 1px darkblue;
}
table{
margin: auto;
border: solid 1px;
width: 480px;
}
tr,td,th{
border: solid 1px;
}
</style>
</head>
<body>
<div >
<input type="text" id="no" placeholder="请输入编号">
<input type="text" id="name" placeholder="请输入姓名">
<input type="text" id="sex" placeholder="请输入性别">
<input type="button" id="btnadd" value="提交" >
</div>
<div>
<table id="t">
<caption>学生信息表</caption>
<tr>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>操作</th>
</tr>
</table>
</div>
<script>
// var no = document.getElementById("no").value;
// var name = document.getElementById("name").value;
// var sex = document.getElementById("sex").value;
var btnadd= document.getElementById("btnadd");
btnadd.onclick=function () {
var no = document.getElementById("no").value;
var name = document.getElementById("name").value;
var sex = document.getElementById("sex").value;
var t= document.getElementById("t"); //获取table元素 通过ID
var td1 = document.createElement("td"); //创建4个td元素
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td1nr = document.createTextNode(no);//创建td1的内容
var td2nr = document.createTextNode(name);//创建td2的内容
var td3nr = document.createTextNode(sex);//创建td3的内容
var td4nr = document.createElement("a");//创建td4的内容
td4nr.setAttribute("href","javascript:void(0);") //超链接形式,但是不重定向
td4nr.setAttribute("onclick","byq(this)"); //点击事件 运行函数,this指本条
td4nr.appendChild(document.createTextNode("删除"))
var tr = document.createElement("tr"); //创建tr元素
td1.appendChild(td1nr); //td1 追加内容 1
td2.appendChild(td2nr); //td2 追加内容 2
td3.appendChild(td3nr); //td3 追加内容 3
td4.appendChild(td4nr); //td4 追加内容 4
tr.appendChild(td1); //tr元素追加子元素 td1
tr.appendChild(td2); //tr元素追加子元素 td2
tr.appendChild(td3); //tr元素追加子元素 td3
tr.appendChild(td4); //tr元素追加子元素 td4
t.appendChild(tr); //table元素追加子元素tr
}
function byq(obj1) {
var table = obj1.parentNode.parentNode.parentNode; //找到要删除的table元素对象
var tr = obj1.parentNode.parentNode; //找到要删除的tr元素对象
table.removeChild(tr); //移除 table内的tr
}
</script>
</body>
</html>
**********************************************************************
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>案例动态表格</title> <style> div{ text-align: center; width: 840px; margin: auto; border: solid 1px darkblue; } table{ margin: auto; border: solid 1px; width: 480px; } tr,td,th{ border: solid 1px; } </style> </head> <body> <div > <input type="text" id="no" placeholder="请输入编号"> <input type="text" id="name" placeholder="请输入姓名"> <input type="text" id="sex" placeholder="请输入性别"> <input type="button" id="btnadd" value="提交" > </div> <div> <table id="t"> <caption>学生信息表</caption> <tr> <th>编号</th> <th>姓名</th> <th>性别</th> <th>操作</th> </tr> <!-- <tr> <td>编号</td> <td>姓名</td> <td>性别</td> <td><a οnclick="byq(this)" href="javascript:void(0);">删除</a></td> </tr> --> </table> </div> <script> var btnadd= document.getElementById("btnadd"); btnadd.οnclick=function () { var t = document.getElementById("t"); var no= document.getElementById("no").value; var name = document.getElementById("name").value; var sex= document.getElementById("sex").value; t.innerHTML =t.innerHTML+"<tr>\n" + " <td>"+no+"</td>\n" + " <td>"+name+"</td>\n" + " <td>"+sex+"</td>\n" + " <td><a οnclick=\"byq(this)\" href=\"javascript:void(0);\">删除</a></td>\n" + " </tr>"; } function byq(obj1) { var table = obj1.parentNode.parentNode.parentNode; //找到要删除的table元素对象 var tr = obj1.parentNode.parentNode; //找到要删除的tr元素对象 table.removeChild(tr); //移除 table内的tr } </script> </body> </html>