Блог

Это может быть простой вопрос. У меня есть одно приложение, в котором я хочу отобразить некоторые значения строк в div с помощью jquery. Я погуглил об этом. но я не могу найти правильное предложение. Как отображать значения td в div при наведении курсора на конкретную строку в таблице. Заранее спасибо. Данные таблицы заполняются из файла JSON.

Лучше всего предоставить пример кода, чтобы мы могли видеть, с чем вы работаете и что вы пробовали. Вот небольшой созданный мной пример, который может вам помочь:

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;
}
 

css для оформления 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 с классом «data», тогда покажите статический div в месте, где находится ваша мышь. Также извлекает .html из td, на который вы наводите курсор, и заполняет им div.

JSFIDDLE

установите класс в строке, а затем вызовите этот класс из jquery. Вам понадобится что-то, чтобы придать строке высоту и ширину, когда ее дочерние элементы скрыты (или убрать функцию скрытия).

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