js動態刪除表格中的某一行
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>動態創建的表格有刪除功能，可以刪除表格中的某一項</title>
<style>
#tab{
margin-top: 20px;
}
#tab tr td{
width: 140px;
height: 30px;
text-align: center;
}
</style>
</head>
<body>
<form action="">
<input type="text" name="" id="txt1" value="張三">
<input type="text" name="" id="txt2" value="男">
<input type="text" name="" id="txt3" value="22">
<input type="button" name="" id="btn" value="添加">
<table border="1px" id="tab" cellpadding=0 cellspacing=0 >
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
<td>操作</td>
</tr>
</table>
</form>
</body>
<script>
var txt1=document.querySelector("#txt1")
var txt2=document.getElementById("txt2")
var txt3=document.getElementById("txt3")
var tab=document.getElementById("tab")
btn.onclick=function(){
var tr=document.createElement("tr")
tab.appendChild(tr)
var td1=document.createElement("td")
var td2=document.createElement("td")
var td3=document.createElement("td")
var td4=document.createElement("td")
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
tr.appendChild(td4)
td1.innerHTML=txt1.value
td2.innerHTML=txt2.value
td3.innerHTML=txt3.value
td4.innerHTML="刪除"
td4.onclick=function(){
tr.remove()
}
}
</script>
</html>
