Javascript 动态创建表上的popover问题_Javascript_Bootstrap 4_Popover

Javascript 动态创建表上的popover问题

javascript bootstrap-4

Javascript 动态创建表上的popover问题,javascript,bootstrap-4,popover,Javascript,Bootstrap 4,Popover,我需要动态填充一个表（大小和内容可能会有所不同），我很难在td元素上显示popover。在添加到tds之前，我甚至尝试在aTag元素上附加popover，但没有任何帮助。这基本上就是框架：脚本标记（jquery、bootstrap、poppercdns）+html table+函数，用于生成带有popover的表元素，如有任何帮助，将不胜感激 <script> function drawTable() { var tbody = document.getElementById(&

我需要动态填充一个表（大小和内容可能会有所不同），我很难在td元素上显示popover。在添加到tds之前，我甚至尝试在aTag元素上附加popover，但没有任何帮助。这基本上就是框架：脚本标记（jquery、bootstrap、poppercdns）+html table+函数，用于生成带有popover的表元素，如有任何帮助，将不胜感激

<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>


函数drawTable（）{
var tbody=document.getElementById（“plTable”）；
对于（var r=0；r0&&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）；
setAttribute（“数据切换”、“popover”）；
cell.setAttribute（“数据内容”，“数量：100录入成本：$13”）；
子行（单元格）；
}
tbody.appendChild（世界其他地区）；
}
}
window.onload=绘图台；
$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。popover({
位置：“顶部”，
触发器：“悬停”，
});
});

我认为您的引导导入存在一些问题。对于我来说，当我使用引导运行此代码时，popover工作正常，并导入到html页面中。不过，也有一些CSS小故障，但一旦popover适合您，就可以解决这些问题

代码：


引导示例
函数drawTable（）{
var totalRows=4；
var-cellsInRow=4；
var tbody=document.getElementById（“plTable”）；
对于（var r=0；r0&&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）；
setAttribute（“数据切换”、“popover”）；
cell.setAttribute（“数据内容”，“数量：100录入成本：$13”）；
子行（单元格）；
}
tbody.appendChild（世界其他地区）；
}
}
window.onload=绘图台；
$（文档）.ready（函数（）{
$（'[data toggle=“popover”]'）。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>