Home > Back-end >  Modal Boxes Not Opening after first instance
Modal Boxes Not Opening after first instance

Time：11-14

I have a table with buttons on the right for a menu. The first button in the menu opens a modal box once clicked. However the first buttons in the following rows for some reason don't open the modal as intended. Attached is a JSfiddle with what im talking about https://jsfiddle.net/dsflyerds/6h1qeb2v/2/ HTML

<p>Length DestinationTrain LengthTrain WeightStatusCapicityRemarks </p>
<table border="1" width="100%">
<tbody>
<tr>
<td class="yard0">5990'</td>
<td class="yard0">Track 1</td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td>
<div class="yardDropdown"><button class="yardDropbtn">Menu</button>
<div class="yard-dropdown-content"><button id="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
</div>
</td>
</tr>
<tr>
<td class="yard0">5818'</td>
<td class="yard0">Track 2</td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td>
<div class="yardDropdown"><button class="yardDropbtn">Menu</button>
<div class="yard-dropdown-content"><button id="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
</div>
</td>
</tr>
<tr>
<td class="yard2">5565'</td>
<td class="yard2">Track 3</td>
<td class="yard2"> </td>
<td class="yard2"> </td>
<td class="yard2"> </td>
<td class="yard2">Empty</td>
<td class="yard2"> </td>
<td class="yard2"> </td>
<td>
<div class="yardDropdown"><button class="yardDropbtn">Menu</button>
<div class="yard-dropdown-content"><button id="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
</div>
</td>
</tr>
<tr>
<td class="yard0">5428'</td>
<td class="yard0">Track 4</td>
<td class="yard0">WC</td>
<td class="yard0">3800'</td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0">
<div class="progressContainer">
<div class="progress" style="width: 70%;">70%</div>
</div>
</td>
<td class="yard0"> </td>
<td>
<div class="yardDropdown"><button class="yardDropbtn">Menu</button>
<div class="yard-dropdown-content"><button id="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
</div>
</td>
</tr>
<tr>
<td class="yard0">1535'</td>
<td class="yard0">Track 5</td>
<td class="yard0"> </td>
<td class="yard0">1500'</td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0">
<div class="progressContainer">
<div class="progress" style="width: 98%;">98%</div>
</div>
</td>
<td class="yard0"> </td>
<td>
<div class="yardDropdown"><button class="yardDropbtn">Menu</button>
<div class="yard-dropdown-content"><button id="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
</div>
</td>
</tr>
<tr>
<td class="yard0">1375'</td>
<td class="yard0">Track 6</td>
<td class="yard0"> </td>
<td class="yard0">5000'</td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0">
<div class="progressContainer">
<div class="progressFull"> </div>
</div>
</td>
<td class="yard0"> </td>
<td>
<div class="yardDropdown"><button class="yardDropbtn">Menu</button>
<div class="yard-dropdown-content"><button id="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
</div>
</td>
</tr>
<tr>
<td class="yard0">1350'</td>
<td class="yard0">Track 7</td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td class="yard0"> </td>
<td>
<div class="yardDropdown"><button class="yardDropbtn">Menu</button>
<div class="yard-dropdown-content"><button id="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
</div>
</td>
</tr>
</tbody>
</table>
<div id="trackModal" class="modal">
<div class="modal-content"><span class="close"> </span> <span class="pg-Heading">Edit Track</span><form action="includes/editTrack.inc.php" method="POST">Destination<input name="destination" type="text" /> Length <input maxlength="7" name="trainLength" size="7" type="text" /> Weight <input maxlength="7" name="trainWeight" size="7" type="text" /> Status<select name="">
<option value="1">Ready</option>
<option value="2">Empty</option>
<option value="3">Hump</option>
</select>Remarks <textarea cols="90" rows="5"></textarea> <input class="buttonMiddleRedC" name="initiate" type="submit" value="DO_IT" /></form></div>
</div>

JavaScript

//MODAL BAN
var modalt = document.getElementById("trackModal");

// Get the button that opens the modal
var btnt = document.getElementById("trackBtn");

// Get the <span> element that closes the modal
var spantrack = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal
btnt.onclick = function() {
  modalt.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
spantrack.onclick = function() {
  modalt.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalt) {
    modalt.style.display = "none";
  }
}

CSS

.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 5px;
  border: 5px solid #888;
  width: 38%; /* Could be more or less, depending on screen size */
  position: relative;
}
.close {
  position: absolute;
  color: #aaa;
  right: 14px;
  font-size: 28px;
  transform: rotate(45deg);
  margin: -9px;

}
.yardDropbtn{
  background-color: #04AA6D;
  color: white;
  padding: 5px;
  font-size: 12px;
  border: none;
  text-transform: uppercase;
}

.yardDropbtn i{
  font-size: 12px;
  top: 1px;
  position: relative;
}

.yardDropdown{
  position: relative;
  display: inline-block;
}

.yard-dropdown-content{
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.yardDropBtnCt{
  display: none;
  background-color: #f1f1f1;
  color: black;
  margin-left: 5px;
  border: 1px;
  display: block;
  width: 100%;
  height: 30px;
  font-size: 15px;
}

.yardDropBtnCt:hover{
  background-color: #ddd;
}

.yard-dropdown-content a:hover {
  background-color: #ddd;
}

.yardDropdown:hover .yard-dropdown-content {
  display: block;
}

.yardDropdown:hover .yardDropbtn{
background-color: #3e8e41;
}

CodePudding user response：

You are repeating unique ID's and using getElementById, which is only going to fire the first instance it finds in the document, you need to get the nodelist of the buttons that are handling the opening and loop through them to find the button with the proper class selector that is being pressed. This can be done using querySelectorAll('.classname').

So change the HTML to use classes instead of id's.

<div class="yardDropdown"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
  <div class="yard-dropdown-content">
    <button class="trackBtn yardDropBtnCt">Edit Track</button><!--change trackBtn here to class-->
    <button class="yardDropBtnCt">Clear Track</button>
    <button class="yardDropBtnCt">Link3</button>
    <button class="yardDropBtnCt">Link4</button></div>
</div>

Then get that nodelist using document.querySelectorAll(".trackBtn")

var btnt = document.querySelectorAll(".trackBtn");

Then loop over the nodelist looking for the event handler using a forEach loop.

btnt.forEach(btn => {
  btn.onclick = function() {
    modalt.style.display = "block";
  }
})

This will open the variable modalt which is in reference to the element with the ID trackModal. You could set up a dataset attribute to track which element is being handled in order to get the unique rendered data for that nodes set of information that is referenced by the button coming from your PHP however I used classes instead in my example snippit. I am not sure how your PHP is set to render that table but I give an example using classes set in the HTML and referenced in the JS to get and set the unique data coming from your table rows.

For example within the onclick event function:

track = e.target.closest('tr').querySelector('.track');

We travel up the nodelist from the event target and get the closest table row by using => e.target.closest('tr') then we target the specific datarow for the track using classes added to the HTML .track -> .querySelector('.track'), together that line is => track = e.target.closest('tr').querySelector('.track');

Then we set the modals info using the modal ID and the same classes set in the HTML for the modal.

For Example on the track:

modalt.querySelector('.pg-Heading').textContent = `Edit ${track.textContent}`;

Now your modal displays the unique data from that table that is tied to that button. To display input data in the modal use .value => modalt.querySelector('.destination').value = destination.textContent;.

Again this all hinges on adding the proper classes to your HTML. Again this can all be set up in your PHP that renders this HTML table.

I have coded a static version of your JSFiddle that uses e.target to get the button being clicked within the nodelist, and then used classes set in the HTML table and modal to identify each unique piece of data within that table row in order to set that within the modal. I use .closest to get the event target rows data. See the snippit code for more info:

Show code snippet

//MODAL BAN
var modalt = document.getElementById("trackModal");

// Get the button that opens the modal
var btnt = document.querySelectorAll(".trackBtn");

// Get the <span> element that closes the modal
var spantrack = document.getElementsByClassName("close")[0];

let track, destination, length, weight, status, remarks = '';

// When the user clicks on the button, open the modal
btnt.forEach(btn => {
  btn.onclick = function(e) {
    track = e.target.closest('tr').querySelector('.track');
    destination = e.target.closest('tr').querySelector('.destination');
    length = e.target.closest('tr').querySelector('.length');
    weight = e.target.closest('tr').querySelector('.weight');
    status = e.target.closest('tr').querySelector('.status');
    remarks = e.target.closest('tr').querySelector('.remarks');
    modalt.querySelector('.pg-Heading').textContent = `Edit ${track.textContent}`;
    modalt.querySelector('.destination').value = destination.textContent;
    modalt.querySelector('.length').value = length.textContent;
    modalt.querySelector('.weight').value = weight.textContent;
    let statusVal = 2;
    if(status.textContent === "Ready"){
      statusVal = 1
    }else if(status.textContent === "Hump"){    
      statusVal = 3
    }
    modalt.querySelector('.status').value = statusVal;
    modalt.querySelector('.remarks').value = remarks.textContent;
    modalt.style.display = "block";
  }
})

// When the user clicks on <span> (x), close the modal
spantrack.onclick = function() {
  modalt.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalt) {
    modalt.style.display = "none";
  }
}
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  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/Box */
.modal-content {
  background-color: #fefefe;
  margin: 15% auto; /* 15% from the top and centered */
  padding: 5px;
  border: 5px solid #888;
  width: 38%; /* Could be more or less, depending on screen size */
  position: relative;
}
.close {
  position: absolute;
  color: #aaa;
  right: 14px;
  font-size: 28px;
  transform: rotate(45deg);
  margin: -9px;

}
.yardDropbtn{
  background-color: #04AA6D;
  color: white;
  padding: 5px;
  font-size: 12px;
  border: none;
  text-transform: uppercase;
}

.yardDropbtn i{
  font-size: 12px;
  top: 1px;
  position: relative;
}

.yardDropdown{
  position: relative;
  display: inline-block;
}

.yard-dropdown-content{
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.yardDropBtnCt{
  display: none;
  background-color: #f1f1f1;
  color: black;
  margin-left: 5px;
  border: 1px;
  display: block;
  width: 100%;
  height: 30px;
  font-size: 15px;
}

.yardDropBtnCt:hover{
  background-color: #ddd;
}

.yard-dropdown-content a:hover {
  background-color: #ddd;
}

.yardDropdown:hover .yard-dropdown-content {
  display: block;
}

.yardDropdown:hover .yardDropbtn{
background-color: #3e8e41;
}
<table border="1" width="100%">
  <th>Length</th>
  <th></th>
  <th>Destination</th>
  <th>Train Length</th>
  <th>Train Weight</th>
  <th>Status</th>
  <th>Capicity</th>
  <th>Remarks</th>
  <th></th>
  <tr>
    <td class='yard0'>5990'</td>
    <td class='yard0 track'>Track 1</td>
    <td class='yard0 destination'></td>
    <td class='yard0 length'></td>
    <td class='yard0 weight'></td>
    <td class='yard0 status'></td>
    <td class='yard0'>
      <div class='progressContainer'></div>
    </td>
    <td class='yard0 id0 remarks'></td>
    <td>
      <div class="yardDropdown"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
        <div class="yard-dropdown-content"><button class="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
      </div>
    </td>
  <tr>
    <td class='yard0'>5818'</td>
    <td class='yard0 track'>Track 2</td>
    <td class='yard0 destination'></td>
    <td class='yard0 length'></td>
    <td class='yard0 weight'></td>
    <td class='yard0 status'></td>
    <td class='yard0'>
      <div class='progressContainer'></div>
    </td>
    <td class='yard0 remarks'></td>
    
    <td>
      <div class="yardDropdown"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
        <div class="yard-dropdown-content"><button class="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
      </div>
    </td>
  <tr>
    <td class='yard2'>5565'</td>
    <td class='yard2 track'>Track 3</td>
    <td class='yard2 destination'></td>
    <td class='yard2 length'></td>
    <td class='yard2 weight'></td>
    <td class='yard2 status'>Empty</td>
    <td class='yard2'>
      <div class='progressContainer'></div>
    </td>
    <td class='yard2 remarks'>This is a remark here. This is a remark here. This is a remark here.This is a remark here.</td>
    <td>
      <div class="yardDropdown id2"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
        <div class="yard-dropdown-content"><button class="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
      </div>
    </td>
  <tr>
    <td class='yard0' >5428</td>
    <td class='yard0 track'>Track 4</td>
    <td class='yard0 destination'>WC</td>
    <td class='yard0 length'>3800'</td>
    <td class='yard0 weight'>11,000k</td>
    <td class='yard0 status'></td>
    <td class='yard0'>
      <div class='progressContainer'>
        <div class='progress' style='width:70%'>70%</div>
      </div>
    </td>
    <td class='yard0 remarks'></td>
    <td>
      <div class="yardDropdown"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
        <div class="yard-dropdown-content"><button class="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
      </div>
    </td>
  <tr>
    <td class='yard0'>1535'</td>
    <td class='yard0 track'>Track 5</td>
    <td class='yard0 destination'></td>
    <td class='yard0 length'>1500'</td>
    <td class='yard0 weight'></td>
    <td class='yard0 status'></td>
    <td class='yard0'>
      <div class='progressContainer'>
        <div class='progress' style='width:98%'>98%</div>
      </div>
    </td>
    <td class='yard0 remarks'></td>
    <td>
      <div class="yardDropdown"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
        <div class="yard-dropdown-content"><button class="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
      </div>
    </td>
  <tr>
    <td class='yard0'>1375'</td>
    <td class='yard0 track'>Track 6</td>
    <td class='yard0 destination'></td>
    <td class='yard0 length'>5000'</td>
    <td class='yard0 weight'></td>
    <td class='yard0 status'>Ready</td>
    <td class='yard0'>
      <div class='progressContainer'>
        <div class='progressFull'>&nbsp;</div>
      </div>
    </td>
    <td class='yard0 remarks'></td>
    <td>
      <div class="yardDropdown"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
        <div class="yard-dropdown-content"><button class="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
      </div>
    </td>
  <tr>
    <td class='yard0'>1350'</td>
    <td class='yard0 track'>Track 7</td>
    <td class='yard0 destination'></td>
    <td class='yard0 length'></td>
    <td class='yard0 weight'></td>
    <td class='yard0 status'></td>
    <td class='yard0'>
      <div class='progressContainer'></div>
    </td>
    <td class='yard0 id6 remarks'></td>
    <td>
      <div class="yardDropdown"><button class="yardDropbtn">Menu<i class="bx bx-menu"></i></button>
        <div class="yard-dropdown-content"><button class="trackBtn" class="yardDropBtnCt">Edit Track</button><button class="yardDropBtnCt">Clear Track</button><button class="yardDropBtnCt">Link3</button><button class="yardDropBtnCt">Link4</button></div>
      </div>
    </td>
  </tr>
</table>

<div id="trackModal" class="modal">
  <div class="modal-content">
    <span class="close"> </span>
    <span class="pg-Heading">Edit Track</span>
    <form action="includes/editTrack.inc.php" method="POST">
      <span>Destination</span>
      <input type="text" class="destination" name="destination"></br>
      <span>Length</span>
      <input type="text" size="7" class="length" name="trainLength" maxlength="7"></br>
      <span>Weight</span>
      <input type="text" size="7" class="weight" name="trainWeight" maxlength="7"></br>
      <span>Status</span>
      <select name="" class="status" name="status">
        <option value='1'>Ready</option>
        <option value='2'>Empty</option>
        <option value='3'>Hump</option>
      </select>
      </br>
      <span>Remarks</span>
      <textarea class="remarks"></textarea>

      </br>

      </br>
      <input type="submit" name="initiate" class="buttonMiddleRedC" value="DO_IT">
      </br>
      </br>
    </form>
  </div>
</div>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Using PHP one might do something like the following: As I am unable to use a database, I use a nested array to show how you could dynamically create your table and modal with PHP. Then using JS to populate it with the info from your event.target buttons Table Row query as described above.

<?php
// represents the same kind of data we may get from a database in an array
$tableObj = [
    ["Length" => "5990", "Track" => "Track 1", "Destination" => "VC", "Train-Length" => "3800'", "Train-Weight" => "11,000", "Status" => "2", "Capacity" => "89%", "Remarks" => "Remark 1"],
    ["Length" => "5818", "Track" => "Track 2", "Destination" => "BC", "Train-Length" => "1500'", "Train-Weight" => "4,000", "Status" => "2", "Capacity" => "75%", "Remarks" => "Remark 2"],
    ["Length" => "5565", "Track" => "Track 3", "Destination" => "FLF", "Train-Length" => "5000'", "Train-Weight" => "21,000", "Status" => "2", "Capacity" => "96%", "Remarks" => "Remark 3"],
    ["Length" => "5428", "Track" => "Track 4", "Destination" => "WC", "Train-Length" => "4200'", "Train-Weight" => "8,545", "Status" => "1", "Capacity" => "87%", "Remarks" => "Remark 4"],
    ["Length" => "1535", "Track" => "Track 5", "Destination" => "LA", "Train-Length" => "3750'", "Train-Weight" => "9,000", "Status" => "2", "Capacity" => "63%", "Remarks" => "Remark 5"],
    ["Length" => "1375", "Track" => "Track 6", "Destination" => "CAN", "Train-Length" => "2000'", "Train-Weight" => "2,000", "Status" => "3", "Capacity" => "100%", "Remarks" => "Remark 6"],
    ["Length" => "1350", "Track" => "Track 7", "Destination" => "CA", "Train-Length" => "6700'", "Train-Weight" => "15,000", "Status" => "2", "Capacity" => "98%", "Remarks" => "Remark 7"]
];
// function to create the table
function createTable($tableObj){
    //define an output variable and build our table
    $output = '<table border="1" width="100%">';
    $cnt = 1;
    foreach($tableObj as $key => $value){
        // only want to run through the nested arrray once
        if($cnt < 2){
            // start the output for the table row
            $output .= '<tr>';            
            foreach($value as $col => $data){
                // the key -> $col will be the class and textual content for the table headers
                $output .= '<th hljs-variable">$col.'">'.$col.'</th>';
            }
            $cnt  ;
            // close the table header row
            $output .= '</tr>';
        }
    }
    // build the table data rows and data
    foreach($tableObj as $key => $value){
        // start output for the table row
        $output .= '<tr>';
        foreach($value as $col => $data){
            // switch our data from the value to the displayed type
            if($col === "Status"){
                switch ($data) {
                    case '1':
                        $data = "Ready";
                        break;
                    case '2':
                        $data = "Empty";
                        break;                    
                    case '3':
                        $data = "Hump";
                        break;
                }
            }
            // output each table data cell, the class will be the key -> $col and the text content will be the $data
            $output .= '<td hljs-variable">$col.'">'.$data.'</td>';
        }
        // add the buttons dropdown HTML and close the table row 
        $output .= '<td><div ><button >Menu<i ></i></button>
        <div ><button  >Edit Track</button><button >Clear Track</button><button >Link3</button><button >Link4</button></div>
      </div></td></tr>';
    }
    // return the output variable
    return $output;
}
// function to create and build the modals HTML
function createModal($arr){  
    // set an iterator variable        
    $cnt = 1;
    // define an output variable and start the modal HTML
    $output = '<div id="trackModal" >
        <div >
            <span > </span>
            <form action="includes/editTrack.inc.php" method="POST">';
        // iterate over the array and get the key values to post as classes in each section
        foreach($arr as $key => $value){
            // again only want to iterate over the inital array once
            if($cnt < 2){
                // iterate over the nested array and get the key/value pairs
                foreach($value as $col => $data){
                    // switch conditional to check each section and output proper 
                    // HTML formatting for that type exclude certain sections from output
                    // again adding the classes needed to post the data into the modal using JS
                    switch ($col) {
                        case "Length":
                            $output .= '';
                            break;
                        case "Capacity":
                            $output .= '';
                            break;
                        case "Track":
                            $output .= '<span hljs-variable">$col.'"><strong>Edit '.$data.'</strong></span><br>';
                            break;
                        case "Status":
                            $output .= '<span>'.$col.'</span>
                        <select hljs-variable">$col.'" name="'.$col.'">
                            <option value="1">Ready</option>
                            <option value="2">Empty</option>
                            <option value="3">Hump</option>
                        </select><br><br>';
                            break;
                        case "Remarks":
                            $output .= '<span>'.$col.'</span>
                        <textarea hljs-variable">$col.'"></textarea><br>';
                            break;
                        default:    
                            $output .= '<span>'.$col.'</span>
            <input type="text" hljs-variable">$col.'" name="'.$col.'"></br>';
                    }
                }
            }
            // close forloop and iterate itartion variable
            $cnt  ;
        }
        // output form submit button and close form
        $output .= '</br></br>
            <input type="submit" name="initiate"  value="DO_IT">
            </br>
            </br>
            </form>
        </div>
    </div>';
    // return output
    return $output;
}
  
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Table</title>
    <link rel="stylesheet" href="style.css">
    <script src="index.js" defer></script>
</head>
<body>
    <?=createTable($tableObj)?>
    <?=createModal($tableObj)?>
</body>
</html>

Your JS would look like this:

//MODAL BAN
var modalt = document.getElementById("trackModal");

// Get the button that opens the modal
var btnt = document.querySelectorAll(".trackBtn");

// Get the <span> element that closes the modal
var spantrack = document.getElementsByClassName("close")[0];

let track, destination, length, weight, stat, remarks = '';

// When the user clicks on the button, open the modal
btnt.forEach(btn => {
  btn.onclick = function(e) {
    track = e.target.closest('tr').querySelector('.Track');
    destination = e.target.closest('tr').querySelector('.Destination');
    console.log(destination)
    length = e.target.closest('tr').querySelector('.Train-Length');
    weight = e.target.closest('tr').querySelector('.Train-Weight');
    stat = e.target.closest('tr').querySelector('.Status');
    remarks = e.target.closest('tr').querySelector('.Remarks');
    modalt.querySelector('.Track').textContent = `Edit ${track.textContent}`;
    modalt.querySelector('.Destination').value = destination.textContent;
    modalt.querySelector('.Train-Length').value = length.textContent;
    modalt.querySelector('.Train-Weight').value = weight.textContent;
    let statusVal = 2;
    if(stat.textContent === "Ready"){
      statusVal = 1
    }else if(stat.textContent === "Hump"){    
      statusVal = 3
    }
    modalt.querySelector('.Status').value = statusVal;
    modalt.querySelector('.Remarks').value = remarks.textContent;
    modalt.style.display = "block";
  }
})

// When the user clicks on <span> (x), close the modal
spantrack.onclick = function() {
  modalt.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modalt) {
    modalt.style.display = "none";
  }
}

Page link：https//www.codepudding.com/Backend/190593.html

Prev:"name is not defined" in express app (registration form page)
Next:How to create dynamic reusable functional component in React?
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding