我有一个包含 n 行的 HTML 表，每行包含一个按钮和两个输入字段。输入字段代表 'Cust ID' 和 'NAME' 。单击任意行中的按钮时，将打开一个模式对话框。此模式对话框显示客户详细信息，例如“customer_id”、“姓名”、“地点”和“电话号码”。当用户单击模态对话框表中包含客户详细信息的行时，我想将模态对话框中的值返回到用户单击按钮的确切行。由于每一行都包含调用相同模态对话框的按钮，因此我如何识别打开模态对话框的请求来自的行。
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
function opn_modal(){
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}body { font-family: Arial, Helvetica, sans-serif; }
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0, 0, 0); /* Fallback color */
background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}<body>
<table>
<thead>
<tr>
<th>Cust ID</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td >
<button type="button" class="get_id" onclick="opn_modal();" >
<span >search </span>
</button>
<input name="f08" maxlength="20" value="" class="cust-id"
style="width:120px;" type="text">
</td>
<td >
<input name="f02" maxlength="50" value=""
class="joint_memno" style="width:120px;"
id="f02_0001" type="text">
</td>
</tr>
<tr>
<td >
<button type="button" class="get_id" onclick="opn_modal();" >
<span >search </span>
</button>
<input name="f08" maxlength="20" value="" class="cust-id"
style="width:120px;" type="text">
</td>
<td >
<input name="f02" maxlength="50" value=""
class="joint_memno" style="width:120px;"
id="f02_0001" type="text">
</td>
</tr>
<tr>
<td >
<button type="button" class="get_id" onclick="opn_modal();" >
<span >search </span>
</button>
<input name="f08" maxlength="20" value="" class="cust-id"
style="width:120px;" type="text">
</td>
<td >
<input name="f02" maxlength="50" value=""
class="joint_memno" style="width:120px;"
id="f02_0001" type="text">
</td>
</tr>
</tbody>
</table>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Place</th>
<th>Phone</th>
</tr>
</thead>
<tbody>
<tr>
<td> 1001</td>
<td> George</td>
<td> Karikku</td>
<td>98896514</td>
</tr>
<tr>
<td> 1002</td>
<td> Shibu</td>
<td> Karikku</td>
<td>98894987</td>
</tr>
<tr>
<td> 1003</td>
<td> Lolan</td>
<td> Karikku</td>
<td>891516519</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>最佳答案
最小变化的方法是将 this 传递到您的 opn_modal 函数中:
onclick="opn_modal(this);"
这将是该属性打开的按钮。然后你可以使用 jQuery 来查找行:
function opn_modal(btn) {
var row = $(btn).closest("tr");
// ...
}
将其存储在某处，当用户关闭模式时，使用它来查找您想要更新的行的各个部分(可能通过 find)(可能使用 text )。
略有变化的版本是使用现代事件处理而不是 onxyz 属性。我可能会在 tbody 上 Hook click，但告诉 jQuery 我只想要回调，如果点击通过这些按钮之一:
$("#the-tbody").on("click", ".get_id", function(e) {
var row = $(this).closest("tr");
// ...
});
其余的大致相同。
关于javascript - 将模式对话框中的值返回到 html 表中的确切行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/54685046/