为什么单击同一行中的按钮时无法从此 HTML 表中获取任务编号？

Question

我一直在尝试调整这个解决方案来适应我的情况，但我似乎无法获得包含任务编号的列。

小提琴来了。

,我不确定从表中删除一行后删除的任务是正确构建。

这是打败我的函数:

function deleteTask(){
const delTask = document.querySelectorAll(".del-btn");
let deleteTaskId = 0;
for (let i = 0; i < delTask.length; i++) {
delTask[i].addEventListener("click", function(event) {
let dataTr = event.target.parentNode;
deleteTaskId = dataTr.querySelectorAll("td")[1].innerText;
});
}
console.log(deleteTaskId)
const td = event.target.parentNode;
const tr =td.parentNode;
tr.parentNode.removeChild(tr);
}

感谢您的帮助!

Answer 1

您可以在这里找到解决问题的方法。在您的示例中，event.target.parentNode的值将是放置按钮的td。获得tr的按钮,你需要得到td的父母然后让innerText获取任务id实现。

function deleteTask(){
const delTask = document.querySelectorAll(".del-btn");
let deleteTaskId = 0;
for (let i = 0; i < delTask.length; i++) {
delTask[i].addEventListener("click", function(event) {
let dataTr = event.target.parentNode;
deleteTaskId = dataTr.parentNode.querySelectorAll("td")[1].innerText;
console.log(deleteTaskId)
});
}
console.log(deleteTaskId)
const td = event.target.parentNode;
const tr =td.parentNode;
tr.parentNode.removeChild(tr);
}

Answer 2

• 我已经使用forEach循环来循环通过所有.del-btn。
• 如果onclick事件，我首先选择TD，然后选择它的父tr，之后我选择td[1]，第二列基本包含任务id，参考tr``.(deletingRow.querySelectorAll("td")[1])，使用innerText得到该列的id值。
• 之后，我删除tr。

if (deletingRow.parentNode) {
deletingRow.parentNode.removeChild(deletingRow);
}

const table = document.querySelector("#dtable");
function deleteTask() {
const delTask = document.querySelectorAll(".del-btn");
let deleteTaskId = 0;
delTask.forEach(deletedTask => {
deletedTask.addEventListener("click", (e) => {
const deletingTd = e.target.parentNode;
const deletingRow = deletingTd.parentNode;
deleteTaskId = parseInt(deletingRow.querySelectorAll("td")[1].innerText);
if (deletingRow.parentNode) {
deletingRow.parentNode.removeChild(deletingRow);
console.log(`Deleted task ID:${deleteTaskId}`);
}
});
});
}

<table class="table table-borderless table-hover table-vcenter" id="dtable">
<thead style="white-space: nowrap">
<tr>
<th style="width: 4%" class="text-center">Client ID</th>
<th style="width: 4%" class="text-center">Task No</th>
<th style="width: 25%" class="text-center">Task</th>
<th style="width: 4%" class="text-center">Date Assigned</th>
<th style="width: 3%" class="text-center">Link To File</th>
<th style="width: 17%" class="text-center">Notes</th>
<th style="width: 12%" class="text-center">Approval</th>
<th style="width: 24%" class="text-center">Comments</th>
<th style="width: 24%" class="text-center">Delete Task</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">1</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">review</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">06/30/2022</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="del-btn"><input type="button" value="Delete" onclick="deleteTask()"></td>
</tr>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">2</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">provide</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">07/04/2022</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="del-btn"><input type="button" value="Delete" onclick="deleteTask()"></td>
</tr>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">3</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">review</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">07/07/2022</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="del-btn"><input type="button" value="Delete" onclick="deleteTask()"></td>
</tr>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">4</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="del-btn"><input type="button" value="Delete" onclick="deleteTask()"></td>
</tr>
<tr>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">AB002</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center">5</td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="align-middle" style="word-wrap: break-word;max-width: 160px;text-align:center"></td>
<td class="del-btn"><input type="button" value="Delete" onclick="deleteTask()"></td>
</tr>
</tbody>
</table>