在我的網頁上，我有一個待辦事項串列，圖書館員工可以在其中寫下并記下他們必須完成的任務（如下所示）：
這是我的表格代碼：
</div>
<table id="myTable" class="display table-auto">
<thead>
<tr>
<th>Name</th>
<th>Note</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>To Clean Booksheleves</td>
<td>On 20th November</td>
<td><button class="bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Delete
</button></td>
</tr>
<tr>
<td>To Prepare Books Based on Category</td>
<td>on 25th November</td>
<td><button class="bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Delete
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
我有一個“添加”按鈕。當員工點擊這個“添加”按鈕時，將出現一個彈出視窗，他們可以在其中輸入新任務的名稱以及注釋。這是它的代碼：
（HTML 和 CSS）：
<button style="background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8;
position: fixed; bottom: 23px; right: 28px; width: 280px;" onclick="Popup()">Add</button>
<div style="display: none; position: fixed;bottom: 0; right: 15px; border: 3px solid #f1f1f1; z-index: 9;" id="myForm">
<form action="/action_page.php" style="max-width: 300px; padding: 10px; background-color: white;">
<h1>Add Tasks</h1>
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter Your New Tasks" name="task" required>
<input type="text" placeholder="Enter Notes" name="note">
<button type="submit" style="background-color: #04AA6D; color: white; padding: 16px 20px; border: none; cursor: pointer;
width: 100%; margin-bottom:10px; opacity: 0.8;">Login</button>
<button type="button" style=" background-color: red;" onclick="closePopUp()">Close</button>
</form>
（腳本）：
script>
function Popup() {
document.getElementById("myForm").style.display = "block";
}
function closePopup() {
document.getElementById("myForm").style.display = "none";
}
</script>
簡單地說，我應該怎么做才能將彈出視窗中的文本框的值傳遞給待辦事項串列？換句話說，我應該如何使用彈出視窗文本框的輸入向待辦事項串列添加新行？
uj5u.com熱心網友回復：
單擊提交按鈕后，只需訪問表單資料并動態生成 UI，如下所示。
function Popup() {
document.getElementById("myForm").style.display = "block";
}
function closePopUp() {
document.getElementById("myForm").style.display = "none";
}
// Event For Submit Button
document.getElementById("submitBtn").addEventListener("click", (e) => {
// Prevent From Redirection (Default Submit Behaviour)
e.preventDefault();
const form = document.getElementById("form");
const formData = new FormData(form);
const task = formData.get("task");
const note = formData.get("note");
// Add New Table Row only if Some Data is Available
if (task !== "" && note !== "") {
const tbody = document.getElementById("tbody");
const tr = document.createElement("tr");
tr.innerHTML = `
<td>${task}</td>
<td>${note}</td>
<td><button >
Delete
</button></td>
`;
tbody.append(tr);
// Reset the Form to Clear existing Data from Input Fields
form.reset();
}
// Close The Pop Up after Adding.
closePopUp();
});<head>
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
</head>
<body>
</div>
<table id="myTable" class="display table-auto">
<thead>
<tr>
<th>Name</th>
<th>Note</th>
<th>Actions</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>To Clean Booksheleves</td>
<td>On 20th November</td>
<td><button class="bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Delete
</button></td>
</tr>
<tr>
<td>To Prepare Books Based on Category</td>
<td>on 25th November</td>
<td><button class="bg-red-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
Delete
</button></td>
</tr>
</tbody>
</table>
</div>
</div>
<button style="background-color: #555; color: white; padding: 16px 20px; border: none; cursor: pointer; opacity: 0.8;
position: fixed; bottom: 23px; right: 28px; width: 280px;" onclick="Popup()">Add</button>
<div style="display: none; position: fixed;bottom: 0; right: 15px; border: 3px solid #f1f1f1; z-index: 9;" id="myForm">
<form id="form" action="/action_page.php" style="max-width: 300px; padding: 10px; background-color: white;">
<h1>Add Tasks</h1>
<label for="name"><b>Name</b></label>
<input type="text" placeholder="Enter Your New Tasks" name="task" required>
<input type="text" placeholder="Enter Notes" name="note">
<button id="submitBtn" type="submit" style="background-color: #04AA6D; color: white; padding: 16px 20px; border: none; cursor: pointer;
width: 100%; margin-bottom:10px; opacity: 0.8;">Login</button>
<button type="button" style=" background-color: red;" onclick="closePopUp()">Close</button>
</form>
</body>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/535438.html