Блог

Главная - Вопросы по программированию - проблемы с всплывающим окном в динамически созданной таблице

проблемы с всплывающим окном в динамически созданной таблице

#javascript #bootstrap-4 #popover

#javascript #bootstrap-4 #всплывающее окно

Вопрос:

Мне нужно динамически заполнять таблицу (размер и содержимое могут меняться), и мне трудно показывать всплывающее окно для элементов td. Я даже пытался прикрепить всплывающее окно к элементам aTag перед добавлением их в tds, но это не помогло. по сути, это скелет: теги скриптов (jquery, bootstrap, popper CDN) html-таблица функция для генерации элементов таблицы с всплывающими окнами любая помощь будет оценена

 <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 amp;amp; c > 0 amp;amp; val < 0) {
        cell.bgColor = "#e01515";
      } else if (r > 0 amp;amp; c > 0 amp;amp; 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>

Ответ №1:

Я думаю, что есть некоторые проблемы с вашим загрузочным импортом. Для меня popover работает нормально, когда я запускаю этот код с помощью bootstrap, импортированный на 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 amp;amp; c > 0 amp;amp; val < 0) {
             cell.bgColor = "#e01515";
           } else if (r > 0 amp;amp; c > 0 amp;amp; 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>

Комментарии:

1. интересно… вероятно, что-то меня подкручивает в остальной части кода. Я бы более внимательно посмотрел на это. спасибо, что подтвердили, что эта часть, по крайней мере, работает правильно.