动态创建的表上的弹出框问题答案

【问题标题】：issues with popover on dynamically created table动态创建的表上的弹出框问题
【发布时间】：2020-10-02 15:29:14
【问题描述】：

我需要动态填充表格（大小和内容可能会有所不同）并且很难在 td 元素上显示弹出框。我什至尝试将弹出框附加到 aTag 元素上，然后再将它们添加到 tds 没有帮助。这基本上是骨架：脚本标签（jquery，bootstrap，popper CDNs）+html table + function to generate table elements with popovers任何帮助将不胜感激

<script>
function drawTable() {
  var tbody = document.getElementById("plTable");
  for (var r = 0; r < totalRows; r++) {
    var row = document.createElement("tr");
    for (var c = 0; c < cellsInRow; c++) {
      var cell = document.createElement("td");

      var val = Math.floor(Math.random() * 10 - 6);
      if (r > 0 && c > 0 && val < 0) {
        cell.bgColor = "#e01515";
      } else if (r > 0 && c > 0 && val > 0) {
        cell.bgColor = "#1ff48d";
      }
      var cellText = document.createTextNode(val);
      cell.appendChild(cellText);
      cell.setAttribute("data-toggle", "popover");
      cell.setAttribute("data-content", "qty: 100 entry cost:$13");
      row.appendChild(cell);
    }
    tbody.appendChild(row);
  }
}
window.onload = drawTable;
</script>

<script>
$(document).ready(function () {
  $('[data-toggle="popover"]').popover({
    placement: "top",
    trigger: "hover",
  });
});
</script>

【问题讨论】：

标签： javascript bootstrap-4 popover

【解决方案1】：

我认为您的引导导入存在一些问题。对我来说，当我使用引导程序运行此代码时，popover 工作正常，导入到 html 页面中。但是有一些 CSS 故障，但是一旦 popover 为您工作，就可以注意这一点。

代码：

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
      <script>
     function drawTable() {
     var totalRows = 4;
     var cellsInRow =4;
       var tbody = document.getElementById("plTable");
       
       for (var r = 0; r < totalRows; r++) {
         var row = document.createElement("tr");
         for (var c = 0; c < cellsInRow; c++) {
           var cell = document.createElement("td");
     
           var val = Math.floor(Math.random() * 10 - 6);
           if (r > 0 && c > 0 && val < 0) {
             cell.bgColor = "#e01515";
           } else if (r > 0 && c > 0 && val > 0) {
             cell.bgColor = "#1ff48d";
           }
           var cellText = document.createTextNode(val);
           cell.appendChild(cellText);
           cell.setAttribute("data-toggle", "popover");
           cell.setAttribute("data-content", "qty: 100 entry cost:$13");
           row.appendChild(cell);
         }
         tbody.appendChild(row);
       }
     }
     window.onload = drawTable;
  </script>
  <script>
     $(document).ready(function () {
       $('[data-toggle="popover"]').popover({
         placement: "top",
         trigger: "hover",
       });
     });
      </script>
   </head>
   <body>
      <table id="plTable"></table>
   </body>
</html>

【讨论】：

很有趣......可能在其余代码中让我搞砸了。我会仔细看看它。感谢您确认这部分至少工作正常。