如何使 Table 行可点击以显示隐藏的行内容？

Question

我的脚本根据存储在数组中的内容生成动态 table。虽然每个数组包含 7 个属性和值（相当于 7 列），但我的脚本生成了一个 table 由于布局设计限制，仅显示三个列七列。

虽然我希望在 table 中显示更多列，但这会弄乱 phone 应用程序的 layout/design。作为解决方案，我想我应该让 table 中的每一行都可点击 。这里的想法是，当单击一行时，会出现一个 bootstrap 模态框，显示该行的 detailed/elaborate 内容。这些 detailed/elaborated 内容将包括默认 table.

中未显示的隐藏数组属性和值

如何使我的 table 行可点击以显示隐藏的行内容？

为了帮助澄清，找到内嵌生成的 table 的图像：

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

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

最后 HTML table 代码：

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

期待您的帮助。

Answer 1

在您的代码中添加以下行。

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

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

Answer 2

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>

如何使 Table 行可点击以显示隐藏的行内容？

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

javascript

arrays

html-table

href