我正在尝试向表中的删除按钮添加功能。 与 list_body 关联的 id 需要位于删除函数内。 我使用了一些 jquery 来让列表显示在页面上。
//get user list info and display in the table
const displayList = (id) =>
fetch(`/api/lists`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}).then(response => response.json())
.then(data => {
const tableBody = document.querySelector('#task-table tbody');
tableBody.innerHTML = "";
data.tasks.forEach(task => {
if (task.list_body) {
let checkboxId = `check-box${task.id}`;
const row = document.createElement("tr");
row.innerHTML = ` <th scope="row"><input class="todo__checkbox" type="checkbox" id="${checkboxId}"></th>
<td class="text-break">${task.list_body}</td>
`;
tableBody.appendChild(row);
console.log(checkboxId);
console.log(task.id);
}
})
})
删除列表功能
const checkedItemBtn = document.querySelector('#btn-complete');
const checkedItem = document.querySelector('.todo__checkbox');
const deleteList = (id) =>
fetch(`/api/lists`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}).then(response => response.json())
.then(data => {
data.tasks.forEach(task => {
if (task.list_body) {
let checkboxId = `check-box${task.id}`;
}
}).then(function (res) {
if (checkedItem === checkboxId) {
return console.log("did this work?")
}
})
})
您需要向删除按钮添加一个事件侦听器，以便在单击按钮时触发删除列表函数。既然您提到删除按钮位于表格行中，我们可以向表格主体添加一个单击事件侦听器，并检查单击的元素是否是删除按钮。
在deleteList函数中，您还需要检查单击的复选框ID是否与您在displayList函数中生成的复选框ID的预期格式匹配。这将允许您识别单击了哪一行的删除按钮。这是您的更新代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
<table id="task-table" class="table table-bordered table-striped">
<thead>
<tr>
<th scope="col">Checkbox</th>
<th scope="col">Task</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
<!-- Table rows will be dynamically added here -->
</tbody>
</table>
<button id="btn-complete">Delete</button>
<script>
// Function to create a table row for each task
const createTableRow = (task) => {
let checkboxId = `check-box${task.id}`;
const row = document.createElement("tr");
row.innerHTML = `
<td><input class="todo__checkbox" type="checkbox" id="${checkboxId}"></td>
<td class="text-break">${task.list_body}</td>
<td><button class="btn btn-danger btn-delete" data-id="${task.id}">Delete</button></td>
`;
return row;
};
// Get user list info and display in the table
const displayList = () =>
fetch(`/api/lists`, {
method: 'GET',
headers: {
'Content-Type': 'application/json',
},
}).then(response => response.json())
.then(data => {
const tableBody = document.querySelector('#task-table tbody');
tableBody.innerHTML = "";
data.tasks.forEach(task => {
if (task.list_body) {
const row = createTableRow(task);
tableBody.appendChild(row);
}
});
});
// Delete list function
const deleteList = (id) =>
fetch(`/api/lists/${id}`, {
method: 'DELETE',
headers: {
'Content-Type': 'application/json',
},
})
.then(() => {
console.log(`Deleted list with ID: ${id}`);
// If the deletion was successful, refresh the table to update the UI
displayList();
})
.catch(error => console.error(`Error deleting list: ${error}`));
// Add event listener to the table body to handle delete button clicks
const tableBody = document.querySelector('#task-table tbody');
tableBody.addEventListener('click', (event) => {
if (event.target.classList.contains('btn-delete')) {
const id = event.target.dataset.id;
deleteList(id);
}
});
// Load and display the list on page load
displayList();
</script>
</body>
</html>