我有一个包含n行的HTML表，其中包含-一个按钮和每行两个输入字段。这些输入字段分别表示'客户ID'和'NAME'。单击任何行中的按钮时，将打开一个模式对话框。此模式对话框显示客户详细信息，例如-'customer_id'，'name'，'place'和'phone number'。当用户单击模态对话框表中包含客户详细信息的行时，我想将模态对话框中的值返回到用户单击按钮的确切行。由于每一行都包含调用同一模式对话框的按钮，因此如何识别打开模式对话框的请求所在的行。
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>
答案 0 :(得分：1)
最小的变化方法是将this传递到您的opn_modal函数中：
onclick="opn_modal(this);"
这将是启用该属性的button。然后，您可以使用jQuery查找行：
function opn_modal(btn) {
var row = $(btn).closest("tr");
// ...
}
将其存储在某个地方，当用户关闭模式时，使用它来查找要更新的行的各个部分（也许通过find）（也许使用text）。
稍有变化的版本是使用现代事件处理而不是onxyz属性。我可能会将click钩在tbody上，但是告诉jQuery如果点击通过这些按钮之一，我只希望回调：
$("#the-tbody").on("click", ".get_id", function(e) {
var row = $(this).closest("tr");
// ...
});
其余的基本相同。
答案 1 :(得分：1)
在button element上，您可以传递parentNode(the tr of the button)（使用此方法），并且在所调用的函数中，可以将model apply a onclick on the tr存储在变量中。在pass the row(using this).和row is clicked assign the values present in the td中，当行的td of the tr单击到saved on the button click.时，我们querySelectorAll(td)使用td inside the tr来访问{{1 }}和.textContent来获取文本并进行分配。
var modal = document.getElementById('myModal');
var elementrow;
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
function opn_modal(e){
elementrow=e.parentNode.parentNode;
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";
}
}
function data(e)
{
elementrow.querySelectorAll('input')[0].value=e.querySelectorAll('td')[0].textContent;
elementrow.querySelectorAll('input')[1].value=e.querySelectorAll('td')[1].textContent;
}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(this);" >
<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(this);" >
<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(this);" >
<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 onclick="data(this)">
<td> 1001</td>
<td> George</td>
<td> Karikku</td>
<td>98896514</td>
</tr>
<tr onclick="data(this)">
<td> 1002</td>
<td> Shibu</td>
<td> Karikku</td>
<td>98894987</td>
</tr>
<tr onclick="data(this)">
<td> 1003</td>
<td> Lolan</td>
<td> Karikku</td>
<td>891516519</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>