从模态对话框返回值到html表中的确切行

时间：2019-02-14 07:19:28

标签： javascript jquery html

我有一个包含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">&times;</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>

2 个答案:

答案 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">&times;</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>

相关问题
最新问题