How do I make a Table rows clickable to show hidden row contents?

Question

My script generates a dynamic table from contents stored in an array. Though each array contains seven properties and values (equivalent to seven columns), my script generates a table that only displays three out of seven columns due to layout design constraints.

Though I would like for more columns to be shown in the table, this would mess up the layout/design of the phone app. As a solution, I thought I'd make every row in the table clickable. The idea here is that when a row is clicked, a bootstrap Modal appears, displaying the detailed/elaborate contents of that row. These detailed/elaborated contents would include the hidden array properties and values that aren't shown in the default table.

How do I make my table rows clickable to show hidden row contents?

To aid in clarifying, find inline an image of what a generated table would look like:

Also, find below the script that generates the table from an array:

var array = [{
  TransactionTime: "August 2, 2019 4:34 PM"
  amount: "100"
  payersNumber: "0705357658"
  paymentStatus: "Success! payment received."
  statusIcon: "<i class='fas fa-check-circle colorBlue'></i> <a 
  href='#'>"
  transactionNumber: "ATPid_40a31c1aad441a3de2f70a17669e651a"
  waitersName: "John.P"
},
{
  TransactionTime: "August 1, 2019 2:34 AM"
  amount: "150"
  payersNumber: "0705357658"
  paymentStatus: "Failed! payment not received."
  statusIcon: "<i class='fas fa-check-circle colorRed'></i> <a 
  href='#'>"
  transactionNumber: "ATPid_40a31c1aad441a3de2f70a17669e651a"
  waitersName: "Maggie.A"
}];

table = document.getElementById("table");

var currentTransaction;
var keys = ["statusIcon", "amount", "TransactionTime"];
for (var i = 0; i < array.length; i++) {
console.log("Number of transactions: " + array.length);
var newRow = table.insertRow(table.length);

  currentTransaction = array[i];
  for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    cell.innerText = currentTransaction[keys[b]];
  }
}

And finally the HTML table code:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/v4-shims.css">

<form id="Searchform" class="Search form delay-4.9s">
  <input id="searchPhoneNumber" type="text" onkeyup="searchByNumber()">     
</form>     


<table id="table" border="1">
  <tr>
    <th>Status</th>
    <th>Amount</th>
    <th>Time</th>
  </tr>
</table>

Looking forward to your help.

Answer 1

var array = [{
    TransactionTime: "August 2, 2019 4:34 PM",
    amount: "100",
    payersNumber: "0705357658",
    paymentStatus: "Success! payment received.",
    statusIcon: "<i class='fas fa-check-circle colorBlue'></i> <a href='#'>",
    transactionNumber: "ATPid_40a31c1aad441a3de2f70a17669e651a",
    waitersName: "John.P"
  },
  {
    TransactionTime: "August 1, 2019 2:34 AM",
    amount: "150",
    payersNumber: "0705357658",
    paymentStatus: "Failed! payment not received.",
    statusIcon: "<i class='fas fa-check-circle colorRed'></i> <a href='#'>",
    transactionNumber: "ATPid_40a31c1aad441a3de2f70a17669e651a",
    waitersName: "Maggie.A"
  }
];

table = document.getElementById("table");

var currentTransaction;
var keys = ["statusIcon", "amount", "TransactionTime"];
for (var i = 0; i < array.length; i++) {
  console.log("Number of transactions: " + array.length);
  var newRow = table.insertRow(table.length);
  newRow.dataset.target = "#myModal";
  newRow.dataset.toggle = "modal";
  newRow.dataset.data = JSON.stringify(array[i]);
  newRow.onclick = function() {
  debugger;
    document.querySelector(".modal-body").innerHTML = Object.values(JSON.parse(this.dataset.data)).join(", ");
  }
  currentTransaction = array[i];
  for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    cell.innerHTML = currentTransaction[keys[b]];
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/all.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.10.0/css/v4-shims.css">

<form id="Searchform" class="Search form delay-4.9s">
  <input id="searchPhoneNumber" type="text">
  <!--onkeyup="searchByNumber()"-->
</form>


<table id="table" border="1">
  <tr>
    <th>Status</th>
    <th>Amount</th>
    <th>Time</th>
  </tr>
</table>

<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">Modal Header</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>
      <div class="modal-body">
      
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Answer 2

add below line to your code.

var newRow = table.insertRow(table.length);
newRow.on('click',ShowPopup); // used to event in dynamically create content.

// your popup function
function ShowPopup(){
  // your logic
}