如何打开表格单元格< td>进入显示隐藏列内容的可点击链接？ [英] How do I turn a table cell <td> into a clickable link that displays hidden column contents?

问题描述

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

I have a script that generates a dynamic table from values stored in an array.

尽管数组具有七个属性（相当于七个列），但动态表仅显示为在七个可能的列中，三列。之所以只显示七分之三的三列，是由于布局设计的限制。

Though the array has seven properties (equivalent to seven columns), the dynamic table is designed to display only three columns out of seven possible columns. The reason for displaying only three columns out of seven, is due to layout design limitations.

我要解决此问题，是要使表格中的一个单元格成为可点击的链接 < a href =＃>< / a> ，这会打开一个弹出的引导卡，其中显示了详细的内容（包含所有七个值）

What I would like to do to resolve this issue, is to make one cell in the table a clickable link <a href="#"></a>, that opens a popup bootstrap card that displays a detailed content (with the values from the all the seven properties) of that particular row.

在我的脚本下面找到，该脚本显示了阵列配置和动态表脚本：

Find below my script which shows the array configuration and the dynamic table script:

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代码下面找到：

Find below my HTML 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">

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

您可能已经注意到，所有状态单元格/列都变为链接。如何获得每个链接以打开包含每个特定行的所有相关行值的Bootstrap卡？

As you have probably noticed, all the Status cells/columns become links. How do I get each of these links to open up to Bootstrap cards that contain all the relevant row values specific each row?

在以下示例中查找所生成表的内容看起来像：

Find below an example of what the generated table would look like:

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

Also, the HTML code demonstrating the structure of a table row:

推荐答案

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

One solution would be to not use anchor tags and instead use JS event listeners.

您需要分配一个唯一的'id

You would need to assign a unique 'id' to each row in the column.

将事件监听器添加到每一行和每个屏幕上，以便用户单击状态按钮/图像或将事件监听器添加到每个st atus按钮/图像并遍历HTML树以查看按钮所属的行。

Add event listeners to either each row and screen for the user clicking the status button/image OR add event listeners to each status button/image and traverse the HTML tree to see which row the button belongs to.

一旦您知道被调用的行，则可以使用JS提取该行。信息并将其打包为引导程序模态/卡的对象。

Once you know the row that got called, you can then use JS to extract the information and package it up into an object for your bootstrap modal/card.

更新：
您可以这样做，

UPDATE: You could do something like this,

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

这篇关于如何打开表格单元格< td>进入显示隐藏列内容的可点击链接？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！