Javascript 如何使表格行可单击以显示隐藏行内容？

我的脚本从数组中存储的内容生成一个动态表。虽然每个数组包含七个属性和值（相当于七个列），但我的脚本生成一个表，由于布局限制，该表只显示七个列中的三个

虽然我希望在表格中显示更多的列，但这会打乱手机应用程序的布局/设计。作为解决方案，我想我应该让表中的每一行都可以点击。这里的想法是，当单击一行时，会出现一个引导模式，显示该行的详细/详细内容。这些详细/详细的内容将包括默认表中未显示的隐藏数组属性和值

如何使我的表行可单击以显示隐藏的行内容

为了帮助澄清，请查找生成表的内联图像：

此外，请在下面找到从数组生成表的脚本：

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]];
  }
}

var数组=[{
交易时间：“2019年8月2日下午4:34”
金额：“100”
付款人编号：“0705357658”
paymentStatus:“成功！已收到付款。”
状态图标：“
交易编号：“ATPID40A31C1AAD441A3DE2F70A17669E651A”
服务员姓名：“John.P”
},
{
交易时间：“2019年8月1日凌晨2:34”
金额：“150”
付款人编号：“0705357658”
paymentStatus:“失败！未收到付款。”
状态图标：“
交易编号：“ATPID40A31C1AAD441A3DE2F70A17669E651A”
服务员姓名：“玛姬，A”
}];
table=document.getElementById（“table”）；
var交易；
变量键=[“状态图标”、“金额”、“交易时间”]；
对于（var i=0；i

最后是HTML表格代码：

<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>

地位
数量
时间

---

期待您的帮助。

在代码中添加以下行

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

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

var数组=[{
交易时间：“2019年8月2日下午4:34”，
金额：“100”，
付款人编号：“0705357658”，
paymentStatus:“成功！已收到付款。”，
状态图标：“”，
交易编号：“ATPID40A31C1AAD441A3DE2F70A17669E651A”，
服务员姓名：“John.P”
},
{
交易时间：“2019年8月1日凌晨2:34”，
金额：“150”，
付款人编号：“0705357658”，
paymentStatus：“失败！未收到付款。”，
状态图标：“”，
交易编号：“ATPID40A31C1AAD441A3DE2F70A17669E651A”，
服务员姓名：“玛姬，A”
}
];
table=document.getElementById（“table”）；
var交易；
变量键=[“状态图标”、“金额”、“交易时间”]；
对于（var i=0；i

地位
数量
时间
模态头
&时代；
关

一种方法是映射所有隐藏属性，如

{amount:{ishiden:true，value:'100'}}

，然后在模式中仅选择它们的值，并在绘制主表时检查

ishiden

键。话虽如此，我认为应该有一个更好的解决办法。