单击“单击此处”选项时popover无法在动态表中工作

4szc88ey 于 2021-09-13 发布在 Java

关注(0)|答案(1)|浏览(382)

我在动态表上提供了popover选项，但popover无法正常工作。当我点击表格标题上的“点击这里”选项时，弹出框出现了，但它显示的尺寸非常小。我试着设置宽度、高度，但不起作用。在popover中，必须有一个输入字段。

<table id="parent_table">
    <thead id="parent-header" >
    </thead>
    <tbody id="parent-table">
    </tbody>
</table>

var $parent_table = $('#parent_table');
var $parent_tableThead = $parent_table.find('#parent-header');
var $parent_tableTbody = $parent_table.find('#parent-table');

for (var i = 0; i < 4; i++) {
  $parent_tableThead.append('<th> column' + i + ' <span name="popover"> click here</span></th>');

}
var rowHtml;
for (var x = 0; x < 20; x++) {
  rowHtml = '<tr>';
  for (let z = 0; z < 4; z++) {
    if (z == 0) {
      rowHtml += '<td> A ' + x + '</td>';
    }
    else if (z == 1) {
      rowHtml += '<td> B' + x + '</td>';
    }
    else {
      rowHtml += '<td> ' + x + '</td>';
    }
  }
  rowHtml += '</tr>';
  $parent_tableTbody.append(rowHtml);
}

$(document).on('click', 'span[name="popover"]', function () {
  var content = " <div class='content'><div class='form-group'><input type='text' class='form-control' value='enter number'>" +
    "</div></div>" +
    "<div>Pin out</div>" +
    "<div id='hide'>Hide</div>" +
    "<div id='unhide'>UnHide</div>" +
    "<div>Search</div>"

  $(this).popover({
    html: true,
    content: content,
    placement: 'bottom',
    template: '<div class="popover" role="tooltip" style="width:230px;">' +
      '<div class="arrow"></div>' +
      '<h3 class="popover-title"></h3>' +
      '<div class="popover-content"></div>' +
      '</div>'
  }).popover('show');
});

jquery JavaScript html-table Popup

来源：https://stackoverflow.com/questions/68507072/popover-not-working-in-dynamic-table-when-click-on-click-here-option

1条答案

按热度按时间

7cjasjjr1#

您只需声明一个新的css类 .wide-popover {width: 250px;} 并在模板中使用它 <div class="popover wide-popover"> .

const $parent_table = $('#parent_table');
const $parent_tableThead = $parent_table.find('#parent-header');
const $parent_tableTbody = $parent_table.find('#parent-table');

for (let i = 0; i < 4; i++) {
  $parent_tableThead.append('<th> column' + i + '<span name="popover"><button>click here</button></span> </th>');
}
let rowHtml;
for (let x = 0; x < 20; x++) {
  rowHtml = '<tr>';
  for (let z = 0; z < 4; z++) {
    if (z == 0) {
      rowHtml += '<td> A ' + x + '</td>';
    }
    else if (z == 1) {
      rowHtml += '<td> B' + x + '</td>';
    }
    else {
      rowHtml += '<td> ' + x + '</td>';
    }
  }
  rowHtml += '</tr>';
  $parent_tableTbody.append(rowHtml);
}

$(document).on('click', 'span[name="popover"]', function () {
  $(this).popover({
    html: true,
    title: 'Popover title',
    content: 'Popover content',
    placement: 'bottom',
    template: '<div class="popover wide-popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div></div>'
  }).popover('show')
});

<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>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<style>
.wide-popover {width: 250px;}
</style>
<table id="parent_table">
  <thead id="parent-header" >
  </thead>
  <tbody id="parent-table">
  </tbody>
</table>

或者，您可以使用jquery在将popover插入dom后更新其css，如下所示。但是，请注意，通常不建议使用javascript操纵样式。

$(this).popover({
    html: true,
    title: 'Popover title',
    content: 'Popover content',
    placement: 'bottom',
    template: '<div class="popover"><div class="arrow"></div>'+
              '<h3 class="popover-title"></h3><div class="popover-content">'+
              '</div></div>'
  }).popover('show')
$('.popover').css('width','250px');

赞(0）回复(0）举报 2021-09-13

我来回答

单击“单击此处”选项时popover无法在动态表中工作

1条答案

相关问题

热门标签

最新问答