<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.box {
width: 1000px;
height: 30px;
}
table {
width: 800px;
border: 1px solid black;
border-collapse: collapse;
border-spacing: 0;
}
thead th,
td {
border: 1px solid black;
height: 20px;
}
</style>
</head>
<body>
<div class="box">
姓名：<input type="text" class="a">
年齡：<input type="text" class="b">
收入: <input type="text" class="c">
操作：<input type="text" class="d">
</div>
<button>點擊</button>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>收入</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script>
var btn = document.querySelector('button');
var tbody = document.querySelector('tbody');
var a = document.querySelector('.a');
var b = document.querySelector('.b');
var c = document.querySelector('.c');
var d = document.querySelector('.d');
//點擊之后進行判斷
btn.addEventListener('click', function () {
if (a.value !== '' && b.value !== '' && c.value !== '' && d.value != '') {
var tr = document.createElement('tr');
var trr = tbody.appendChild(tr);
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = a.value;
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = b.value;
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = c.value;
var td = document.createElement('td');
// td.innerHTML='<a href="https://bbs.csdn.net/topics/#">洗掉</a>'
tr.appendChild(td);
td.innerHTML = d.value + '<a href="https://bbs.csdn.net/topics/#">洗掉</a>';
}
var aa = document.querySelectorAll('a');
for (var i = 0; i < aa.length; i++) {
aa[i].addEventListener('click', function () {
tbody.removeChild(this.parentNode.parentNode);
})
}
})
</script>
</body>
</html>
uj5u.com熱心網友回復：
你這問題是啥？uj5u.com熱心網友回復：
btn.addEventListener('click', function () {
if (a.value !== '' && b.value !== '' && c.value !== '' && d.value != '') {
var tr = document.createElement('tr');
var trr = tbody.appendChild(tr);
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = a.value;
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = b.value;
var td = document.createElement('td');
tr.appendChild(td);
td.innerHTML = c.value;
var td4 = document.createElement('td');
// td.innerHTML='<a href="https://bbs.csdn.net/topics/#">洗掉</a>'
tr.appendChild(td4);
td4.innerHTML = d.value + '<a href="https://bbs.csdn.net/topics/#">洗掉</a>';
}
var aa = td4.getElementsByTagName("a")[0];
aa.addEventListener('click', function () {
tbody.removeChild(this.parentNode.parentNode);
})
})
uj5u.com熱心網友回復：
點擊洗掉按鈕的時候，在控制臺報錯，瀏覽器確實可以洗掉。
uj5u.com熱心網友回復：
報錯的內容發一下 不然不好搞啊uj5u.com熱心網友回復：
demo.html:86 Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
at HTMLAnchorElement.<anonymous> (file:///F:/%E6%88%91%E7%9A%84%E5%89%8D%E7%AB%AF/%E6%A1%88%E4%BE%8B/%E5%8A%A8%E6%80%81%E7%94%9F%E6%88%90%E8%A1%A8/demo.html:86:31)
(anonymous) @ demo.html:86
uj5u.com熱心網友回復：
var aa = document.querySelectorAll('a');
aa[aa.length - 1].addEventListener('click', function () {
tbody.removeChild(this.parentNode.parentNode);
})
重復系結事件造成的，洗掉后又觸發了一次事件，該元素已經洗掉再次洗掉就會報錯
所以給新加的這個元素系結一個click事件就行
uj5u.com熱心網友回復：
demohtml:86行未捕獲的DOMException:未能在“Node”上執行“removeChild”：要洗掉的節點不是此節點的子節點。 你主要看一下86行 問題點在86行轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/127893.html
標籤：JavaScript
上一篇：小白求教，應該如何學習計算機？