Question

我有一个绘制表的tal模板，但是在悬停时显示单元格标题的函数不起作用。

这是我的代码：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
        <div class="container"><input class="form-control" id="multi_host_filter" type="text" placeholder="Filter"></div>
        <div class="container" tal:repeat="machine_result item.items()">
          <button class="btn btn-info btn-sm btn-block btn-expand" type="button" data-toggle="collapse" data-target="#${machine_result[0]}_div" aria-expanded="false" aria-controls="${machine_result[0]}_div" tal:content="machine_result[0]"/>
        <div class="collapse container" id="${machine_result[0]}_div">
          <table class="table table-hover table-sm table-responsive table-bordered">
            <tr tal:repeat="tuple machine_result[1].get('return')">
              <th tal:condition="repeat['tuple'].index==0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
              <td class="td-hover" tal:condition="repeat['tuple'].index!=0" tal:repeat="data tuple.split(';;')" tal:content="data"/>
            </tr>
          </table>
         </div>
        </div>
    </div>


     <script>
    $(document).ready(function(){
      $("#multi_host_filter").on("keyup", function() {
        var value = $(this).val().toLowerCase();
        $("table tr").filter(function() {
          $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
        });
      });
    });



    $("td").on({
       mouseenter: function(e){
            var $cell = $(this);
            var headerVal = $cell.closest("table").find("tr > th").eq($cell.index()).html();
            var paragraph = '<p>' + headerVal + '</p>';
            $('#floating_div').html(paragraph);
            $('#floating-div').stop(true);
            $('#floating_div').css({left: e.pageX, top: e.pageY});
            $('#floating_div').width(150);
            $('#floating_div').css('z-index', 4000);
            $('#floating_div').height(40);
        },
        mouseleave: function(e){
            $('#floating_div').css('z-index', -4000);
            $('#floating-div').css('display', 'none');
        },
    });
    
    
    </script>

我已经尝试过$（'table'）。hover（function（）{// something} ，function（）{//什么时候离开}）但是当我离开桌子时不会隐藏div

“＃floating-div”已在index.html创建，我可以从此脚本修改它有什么想法吗？

Answer 1

当查看你的代码时，在大多数情况下，它似乎正是你想要完成的 - 表格在格式化方面有点不稳定（打开和关闭TH和TD <th>...</th>和<td>...</td> - 但我也不熟悉tal模板）。

但是将代码减少到最小值并重复使用它，我生成了以下解决方案。

唯一的另一个真正的编辑是我在mouseleave()上的#floating_div事件中添加，在光标下面填充div会导致光标混乱。如果它认为它位于<td>之上，它现在突然位于#floating_div之上。所以，“离开”<td>不起作用。这是因为光标现在位于其他位置之上，并且会离开。

$("td").on({
   mouseenter: function(e){
        //console.log( 'in',  this );
        let output = $(this).closest("table").find("tr > th").eq($(this).index()).html();
        $('#floating_div').html( output );
        $('#floating_div').removeClass('hidden');
        $('#floating_div').css({left: e.pageX, top: e.pageY});
    },
    mouseleave: function(e){
        //console.log( 'out', this );
        $('#floating_div').addClass('hidden');
    },
});

$('#floating_div').mouseleave( function(){
  $(this).addClass('hidden');
});

*{ margin: 0; padding: 0; font-family: Arial, sans-serif; }
table, td, th{ padding: 5px; border: solid 1px rgba( 0, 0, 0, 0.25); }
#floating_div{
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
  display: block;
  background-color: rebeccapurple;
  color: white;
  pointer-events: none;
}
  #floating_div.hidden{
    display: none;
    top: -1000px;
    left: -1000px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <tr>
    <th>header 1</th>
    <th>header 2</th>
  </tr>
  <tr>
    <td>data 1</td>
    <td>data 2</td>
  </tr>
</table>

<div id="floating_div" class="hidden"></div>

在悬停表格时显示带有信息的div不起作用

1 个答案: