动态创建的弹出窗口问题 table

Question

我需要动态填充 table（大小和内容可能会有所不同）并且很难在 td 元素上显示弹出窗口。在将它们添加到 tds 之前，我什至尝试将 popover 附加到 aTag 元素上没有帮助。这本质上是骨架：脚本标签（jquery，bootstrap，popper CDNs）+html table +函数生成带有弹出窗口的table元素任何帮助都会受到赞赏

<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:");
      row.appendChild(cell);
    }
    tbody.appendChild(row);
  }
}
window.onload = drawTable;
</script>

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

Answer 1

我认为您的 bootstrap 导入有一些问题。对我来说，当我运行使用 bootstrap 将此代码导入到 html 页面时，弹出窗口工作正常。然而，存在一些 CSS 故障，但一旦弹出窗口适合您，就可以解决这些问题。

代码：

<!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:");
           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>

动态创建的弹出窗口问题 table

issues with popover on dynamically created table

javascript

popover

bootstrap-4