没问题，我帮你搞定这个需求！咱们一步步来实现点击表格行弹出Modal展示完整交易数据的功能：

步骤1：引入Bootstrap依赖 #

首先得把Bootstrap的CSS、JS，还有它依赖的jQuery引入到页面里，不然Modal没法正常工作：

<!-- 引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css">
<!-- 引入Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>

步骤2：添加Bootstrap Modal的HTML结构 #

在页面合适的位置（比如表格下方）添加Modal的结构，我们先写一个空的Modal，后续用JS填充内容：

<!-- Bootstrap Modal -->
<div class="modal fade" id="transactionModal" tabindex="-1" role="dialog" aria-labelledby="transactionModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="transactionModalLabel">交易详情</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modalBody">
        <!-- 这里会用JS填充完整交易信息 -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>

步骤3：修改表格生成脚本 #

这里要做三个关键修改：

• 把行设置为可点击（添加点击事件和鼠标悬停样式）
• 把当前交易的完整数据存在行元素上，方便点击时获取
• 修正innerText为innerHTML，不然状态图标会显示成纯文本而不是图标

修改后的JS脚本：

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 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);
  var currentTransaction = array[i];
  
  // 把完整交易数据转成JSON存在行的data属性里
  newRow.dataset.transaction = JSON.stringify(currentTransaction);
  // 添加点击事件
  newRow.addEventListener('click', showTransactionDetails);
  // 添加鼠标悬停样式，提示用户可点击
  newRow.style.cursor = 'pointer';

  for (var b = 0; b < keys.length; b++) {
    var cell = newRow.insertCell(b);
    // 用innerHTML替代innerText，这样图标能正常渲染
    cell.innerHTML = currentTransaction[keys[b]];
  }
}

步骤4：编写展示交易详情的函数 #

这个函数会在点击行时触发，读取行上存的交易数据，填充到Modal里然后显示：

function showTransactionDetails() {
  // 从行的data属性里取出交易数据并解析
  var transaction = JSON.parse(this.dataset.transaction);
  var modalBody = document.getElementById('modalBody');
  
  // 构建Modal里的内容，把所有7个属性都展示出来
  modalBody.innerHTML = `
    <div class="mb-3">
      <strong>状态:</strong> ${transaction.statusIcon}
    </div>
    <div class="mb-3">
      <strong>金额:</strong> ${transaction.amount}
    </div>
    <div class="mb-3">
      <strong>交易时间:</strong> ${transaction.TransactionTime}
    </div>
    <div class="mb-3">
      <strong>付款人号码:</strong> ${transaction.payersNumber}
    </div>
    <div class="mb-3">
      <strong>付款状态:</strong> ${transaction.paymentStatus}
    </div>
    <div class="mb-3">
      <strong>交易编号:</strong> ${transaction.transactionNumber}
    </div>
    <div class="mb-3">
      <strong>服务员姓名:</strong> ${transaction.waitersName}
    </div>
  `;
  
  // 显示Modal
  $('#transactionModal').modal('show');
}

补充：样式优化（可选） #

可以给表格行加个悬停高亮，提升用户体验：

#table tr:hover {
  background-color: #f5f5f5;
}

这样一来，用户点击表格里的任意一行，就会弹出Modal展示该交易的所有7个属性信息，完美适配手机端布局～

内容的提问来源于stack exchange，提问作者SirBT