CODEWITHSUNDEEP
javascriptjqueryhtml
Nidheesh
Nidheesh

Reputation: 812

Return values from modal dialog to the exact row in html table

I have an HTML table with n rows which contains - one button and two input fields in each row.The input fields represent 'Cust ID' and 'NAME' . When the button in any row is clicked, it will open a modal dialog. This modal dialog shows customer details such as- 'customer_id','name','place' and 'phone number'. When the user clicks the row in the modal dialog table containing customer details, I want to return the values from the modal dialog to the exact row from where the user clicks the button. Since each row contains the button which calls the same modal dialog, how can I identify the row from where the request to open modal dialog was come from.

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>

Upvotes: 1

Views: 2067

Answers (2)

ellipsis
ellipsis

Reputation: 12152

On the button click you can pass the button element (using this) and inside the function called you can store the parentNode(the tr of the button) inside a variable. In the model apply a onclick on the tr and pass the row(using this). When the row is clicked assign the values present in the td of the row clicked to the td of the tr which we saved on the button click. Use querySelectorAll(td) to access the td inside the tr and .textContent to get the text and assign it. 

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>

Upvotes: 1

T.J. Crowder
T.J. Crowder

Reputation: 1074335

The minimal-changes way is to pass this into your opn_modal function:

onclick="opn_modal(this);"

That will be the button that attribute is on. Then you can use jQuery to find the row:

function opn_modal(btn) {
    var row = $(btn).closest("tr");
    // ...
}

Store that somewhere, and when the user closes the modal, use it to find the various parts of the row (via find, perhaps) that you want to update (perhaps with text).

The slightly-more-changes version is to use modern event handling rather than onxyz attributes. I'd probably hook click on the tbody, but tell jQuery I only wanted callbacks if the click passed through one of those buttons:

$("#the-tbody").on("click", ".get_id", function(e) {
    var row = $(this).closest("tr");
    // ...
});

The rest is much the same.

Upvotes: 1

Related Questions