Question

这可能是一个简单的问题。我有一个应用程序，我想使用jquery在div中显示一些行值。我用Google搜索了一下。但我找不到合适的建议。当我将鼠标悬停在表格中的特定行时，如何在div中显示td值。提前致谢。表数据从JSON文件填充。

Answer 1

最好提供示例代码，以便我们查看您正在使用的内容以及您尝试过的内容。以下是我创建的一个可以帮助您的小样本：

<强> HTML

<table>
    <tr>
        <td id="1" class="data">
            test1
        </td>
        <td id="2" class="data">
            test2
        </td>
    </tr>
</table>
<div class="fixed">Hello World!</div>

你的基本表。

<强> CSS

.fixed {
    position: absolute;
    top: 20px;
    left: 20px;
    border: 1px solid black;
    padding: 5px;
    z-index: 100px;
    background-color: red;
    display: none;
}

用于设置hoveringdiv的样式

<强>的jQuery / JavaScript的

var mouseX;
var mouseY;
$(document).mousemove( function(e) {
   mouseX = e.pageX; 
   mouseY = e.pageY;
});  

$( ".data" ).mouseenter(function() {
  $(".fixed").show();
  $(".fixed").html($(this).html());
      $('.fixed').css({'top':mouseY,'left':mouseX}).fadeIn('slow');
});


 $( ".data" ).mouseleave(function() {
  $(".fixed").hide();

});

jQuery从dom抓取鼠标位置。如果您输入的是具有“数据”类的dom对象，则在鼠标位置显示静态div。还从你盘旋的td抓取.html并用它填充div。

JSFIDDLE

Answer 2

在行上设置一个类，然后从jquery中调用该类。当孩子被隐藏时（或取出隐藏功能），你需要一些适当的东西来为行提供一个高度和宽度。

$(function(){
    $('.row').hover(function(){
    $(this).children().show();
},function(){
    $(this).children().hide();
});
});

当鼠标悬停到使用jquery的特定行时，如何将行值附加到div中

2 个答案: