如何将表格单元格 <td> 变成显示隐藏列内容的可点击链接？

Question

我有一个脚本，可以根据存储在数组中的值生成动态表。

虽然数组有 七 个属性（相当于七列），但动态表格设计为仅显示 三列 三列 strong>七种可能的列。仅显示七列中的 三列 的原因是布局设计限制。

我想要解决这个问题，是在表格中将 一个 单元格设为可点击的链接 <a href="#"></a>，这会打开一个弹出 引导卡显示该特定行的详细内容（包含所有七个属性的值）。

在我的脚本下方找到显示数组配置和动态表脚本：

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 代码：

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

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

您可能已经注意到，所有 状态 单元格/列都变成了链接。如何让这些链接中的每一个都打开到包含特定于每行的所有相关行值的引导卡？

在下面查找生成的表格的示例：

另外，演示表格行结构的 HTML 代码：

Answer 1

一种解决方案是不使用锚标记，而是使用 JS 事件侦听器。

您需要为列中的每一行分配一个唯一的“id”。

为用户单击状态按钮/图像的每一行和屏幕添加事件侦听器，或者为每个状态按钮/图像添加事件侦听器并遍历 HTML 树以查看按钮属于哪一行。

一旦您知道被调用的行，您就可以使用 JS 提取信息并将其打包成一个对象，用于您的引导模式/卡片。

更新： 你可以这样做，

// after you insert a new row you get the element node back...
var newRow = table.insertRow(table.length);
// assign a unique id value to it
newRow.id = 'something';

// add an event listener to the row
newRow.addEventListener('click', event => {
    // when someone clicks on the ROW, you get a hit, but you're not sure what part of the row they clicked on...
    //...so create a check to make sure they clicked on the button
    if (event.target === 'some_way_to_indicate_the_status_button') {
        let row_number = event.target.id;

        // use the row number to grab all data from that row
        // package all of that data into an object {} or array, whichever you choose, then do what you want with it
    }
});