我有一個網頁，其中列出了表格的多行。每行都有一個按鈕，用于在用戶想要洗掉該行時打開確認模式。
有沒有辦法將行資訊（索引或其他東西）傳遞給表格元素之外的提交按鈕元素并執行實際的洗掉功能？
我知道<input type="button" value="Delete" onclick="deleteRow(this)"/>
如果它在 tr 元素內會起作用，但事實并非如此。
我的 HTML 代碼：
<table id="myTable">
<tr>
<th><fmt:message key="time"/></th>
<th><fmt:message key="name"/></th>
</tr>
<c:forEach items="${myList}" var="item">
<tr>
<td>${item.timeStamp}</td>
<td>${item.name}</td>
<td><input type="button" onclick="openModal"/>Delete</td> //here I want to store this rows index
<tr>
</c:forEach>
</table>
<div class="modal-container" id="modal_container">
<div class="modal">
<p>Do you want to remove item?</p>
<button type="button" id="close">Cancel</button>
<button type="submit" id="remove" onclick="deleteRow(this)">Yes</button> //here I want to use the stored index
</div>
</div>
uj5u.com熱心網友回復：
您需要全域變數來保存該行：
var row;
然后是打開模式并保存行的功能：
// When the user clicks on the button, open the modal and save the row
let openModal = function(scope) {
modal.style.display = "block";
row = scope;
}
如果用戶按下是，則洗掉該行的功能：
// When the user clicks on the yes button, delete the row, close the modal and reset row
function deleteRow() {
var parent = row.parentNode.parentNode;
parent.parentNode.removeChild(parent);
row = "";
modal.style.display = "none";
}
您的按鈕應打開模式對話框
<td><input type="button" onclick="openModal(this)"/></td>
如果用戶按是，您將呼叫洗掉功能
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Do you want to remove item?</p>
<button type="submit" id="remove" onclick="deleteRow()">Yes</button>
</div>
</div>
在我的代碼筆頁面上，我為您解決了這個問題。
uj5u.com熱心網友回復：
我從未使用過 Jsp，但您可以嘗試這樣的事情（vanilla javascript）：
var form = window.querySelector('#myTable');
var buttonSubmit = window.querySelector('#remove');
// Events
buttonSubmit.addEventListener('click', submitMe);
form.addEventListener('submit', submitMe);
// Submit function
function submitMe(e) {
e.preventDefault(); // 'Revoke' current action of the event (use to stop input submit request)
const formData = new FormData(form);
formData.append('CustomKey', 'CustomValue');
// Send new XMLHttpRequest here
}
一些檔案：
- 表單資料 MDN
- XMLHttpRequest
- preventDefault（事件函式）
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/472832.html
標籤：javascript html jsp
上一篇：如何將所有檔案從一個檔案夾復制到同一個S3存盤桶中的另一個檔案夾
下一篇：ICMP