Question

我正在尝试创建一个数据表，可以通过单击每一行并弹出一个对话框来进行编辑，我一直在尝试使用引导模态，但是我真的希望对话框显示为与单击该行。

Answer 1

这里是一个让您入门的想法。

打开代码段并运行它，然后将鼠标悬停在MoreData列上。

基本上，您可以使用jQuery的var arr2 = arr.map(x => x.element);方法来确定您在表格的哪个.closest()上，然后使用<tr>获取窗口中的垂直位置-并将您的表格放置在窗口中在那里对话。

.offset().top

$('tr td').hover(
  function(){
    var $this = $(this);
    showMdl($this); 
  },
  function(){ hideMdl(); }
);

function showMdl($this){
  var tr = $this.closest('tr');
  var os = tr.offset().top;
  $('#msg').css({'top':os+'px'}).html(os).show();
}

function hideMdl(){
  $('#msg').hide();
}

#spacer_div{width:100vw;height:30vh;background:palegreen;}
  .flx{display:flex;justify-content:center;align-items:center;}
table{border-collapse:collapse;}
td{border:1px solid #ccc;}

#msg{display:none;position:fixed;left:0;top:15vh;background:wheat;z-index:2;}

如何在单击时在表格的单元格上方显示对话框

1 个答案: