我對我的函式 remove(btn) 有疑問。我不太明白為什么它不起作用。這個功能有一個按鈕，當我點擊它時，它應該將它添加到洗掉表并增加計數器，同時從主表中減少計數器并從那里洗掉行。這是我的代碼：
var title = document.getElementById("title");
var author = document.getElementById("author");
var output = document.getElementById("output");
function addToTable() {
var radio = document.getElementsByName("content");
var radio_selected;
for (var a = 0; a < radio.length; a ) {
if (radio[a].checked) {
radio_selected = radio[a].value;
}
}
output.innerHTML = "<tr>" "<td>" title.value "</td>"
"<td>" author.value "</td>"
"<td>" radio_selected "</td>"
"<td>" "<input type='button' onclick='post(this);' value ='Post'>"
"<input type='button' onclick='remove(this);' value ='Remove'>" "</td>" "</tr>"
}
function counter() {
var brojac = document.getElementById("counterForElements");
brojac.innerHTML = parseInt(brojac.innerHTML) 1;
}
function remove(btn) {
var row = btn.parentNode.parentNode;
var removed = document.getElementById("removed");
removed.append(row);
row.parentNode.removeChild(row);
var brojac = document.getElementById("counterForElements"); //counter
brojac.innerHTML = parseInt(brojac.innerHTML) - 1; //counter
}
function post(btn) {
var row = btn.parentNode;
row.parentNode.style.backgroundColor = "Green";
btn.setAttribute("disabled", "true");
btn.parentNode.lastElementChild.setAttribute("disabled", "true");
}label {
width: 100px;
display: inline-block;
}
table,
th,
td,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
}
table td {
text-align: center;
}<div>
<div>
<label for="Title">Title</label>
<input type="text" id="title">
</div>
<div>
<label for="Author">Author</label>
<input type="text" id="author">
</div>
<div>
<label for="content" id="contentlabel">Content type</label>
<input type="radio" name="content" value="Free" class="content">Free
<input type="radio" name="content" value="Paid" class="content">Paid
</div>
</div>
<div>
<input type="button" value="Add" onclick="addToTable(); counter();">
</div>
<div>
<table>
<thead>
<th style="width:40%;">Title</th>
<th style="width:40%;">Author</th>
<th style="width:10%;">Type</th>
<th style="width:10%;">Button</th>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
<div>
<h1>Number of elements: <span id="counterForElements">0</span></h1>
<h1>Removed elements</h1>
<table id="removed">
</table>
</div>uj5u.com熱心網友回復：
我發現了錯誤，只需將您的代碼替換為：
function remove(btn) {
var row = btn.parentNode.parentNode;
var removed = document.getElementById("removed");
removed.append(row);
var brojac = document.getElementById("counterForElements");//counter
brojac.innerHTML = parseInt(brojac.innerHTML) - 1;//counter
}
我洗掉了這個宣告：row.parentNode.removeChild(row);.
uj5u.com熱心網友回復：
如果您想為添加的專案和已洗掉的專案設定計數器，您可以嘗試以下方法 - 為已洗掉的專案添加一個額外的跨度，以便您查看數量
HTML
<h1>Number of elements: <span id="counterForElements">0</span></h1>
<h1>Removed elements: <span id="counterForElements1">0</span></h1>
接著
JS
function remove(btn){
var row = btn.parentNode.parentNode;
var removed = document.getElementById("removed");
removed.append(row);
row.parentNode.removeChild(row);
var brojac = document.getElementById("counterForElements");
var brojac1 = document.getElementById("counterForElements1");//counter
brojac1.innerHTML = parseInt(brojac1.innerHTML) - 1;//counter
brojac.innerHTML = parseInt(brojac.innerHTML) - 1;
}
我認為這些都是我所做的所有更改，您可以在此處查看這些更改后您的代碼是什么樣的 -
密碼筆
這只是一個示例 id 名稱，您可以使用任何您喜歡的名稱
- 這完全取決于您的最終目標是什么。
uj5u.com熱心網友回復：
您正在移動行，因此我強烈建議您計算實際行數
此外，委托（tbody 上的 eventListener）使代碼更簡單，并允許我們洗掉行內事件處理程式。
最后是一個陣列來保存資料和一個地圖來渲染它
const titleField = document.getElementById("title");
const authorField = document.getElementById("author");
const output = document.getElementById("output");
const add = document.getElementById("add");
const brojac = document.getElementById("counterForElements");
const removed = document.getElementById("removed");
const arr = [];
const counter = () => brojac.textContent = output.querySelectorAll("tr").length;
const render = () => output.innerHTML = arr
.map(({ title, author, paymentType },i) => `<tr data-idx="${i}">
<td>${title}</td>
<td>${author}</td>
<td>${paymentType}</td>
<td><input type="button" value="Post" />
<input type="button" value="Remove"></td>
</tr>`).join("");
const addToTable = () => {
const paymentType = document.querySelector("[name=content]:checked")?.value ?? "";
const author = authorField.value
const title = titleField.value
arr.push({ author, title, paymentType })
render()
counter();
};
output.addEventListener("click", e => {
const tgt = e.target;
if (tgt.matches(".remove")) {
const row = tgt.closest("tr");
arr.splice( row.dataset.idx,1); // removing the element from the array at index
removed.append(row);
counter(); // count what's left
} else if (tgt.matches(".post")) {
var row = tgt.closest("tr");
row.style.backgroundColor = "Green";
tgt.setAttribute("disabled", "true");
tgt.nextElementSibling.setAttribute("disabled", "true");
}
})
add.addEventListener("click", addToTable)label {
width: 100px;
display: inline-block;
}
table,
th,
td,
tr,
td {
border: 1px solid black;
border-collapse: collapse;
}
table td {
text-align: center;
}<div>
<div>
<label for="Title">Title</label>
<input type="text" id="title">
</div>
<div>
<label for="Author">Author</label>
<input type="text" id="author">
</div>
<div>
<label for="content" id="contentlabel">Content type</label>
<input type="radio" name="content" value="Free" class="content">Free
<input type="radio" name="content" value="Paid" class="content">Paid
</div>
</div>
<div>
<input type="button" value="Add" id="add" />
</div>
<div>
<table>
<thead>
<th style="width:40%;">Title</th>
<th style="width:40%;">Author</th>
<th style="width:10%;">Type</th>
<th style="width:10%;">Button</th>
</thead>
<tbody id="output">
</tbody>
</table>
</div>
<div>
<h1>Number of elements: <span id="counterForElements">0</span></h1>
<h1>Removed elements</h1>
<table id="removed">
</table>
</div>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/491981.html
標籤：javascript html css