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

Question

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

尽管该数组有七个属性（相当于七列），但动态表被设计为仅显示七列中的三列。仅显示七列中的三列的原因是由于布局设计限制。

为了解决这个问题，我想做的是让表格中的一个单元格成为可点击的链接<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 代码：

标签： javascripthtmlarrayshtml-table

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