通过鼠标点击或悬停来显示html表格标签名称

我写了一个显示表格的html代码。现在我想要做的就是这样，点击或将鼠标悬停在表格上，然后标签名称将显示。由于我是新的jquery，我无法组织jQuery中的逻辑。下面的HTML代码生成一个简单的表格通过鼠标点击或悬停来显示html表格标签名称

<div class="css"> 
       <table> 
        <thead> 
         <tr> 
          <th>User</th> 
          <th>Country</th> 
          <th>City</th> 
          <th>BithDate</th> 

         </tr> 

        </thead> 
        <tbody> 
         <tr> 
          <td>abc</td> 
          <td>abc</td> 
          <td>abc</td> 
          <td>abc</td> 
         </tr> 
         <tr> 
          <td>cdf</td> 
          <td>cdf</td> 
          <td>cdf</td> 
          <td>cdf</td> 
         </tr> 
        </tbody> 
       </table> 
       </div>

了出来把 enter image description here

现在我想要做的是什么样的，当我在用户/国家点击它会显示：“THEAD：TH”当我将鼠标指向abc或cdf时，它会显示：“tr：td”。

我想要做的是对每个tr td使用click事件。但有没有其他方法可以做到这一点。提前致谢！！

来源

2014-09-04 MAT14

在浏览器中使用现有的开发人员工具不是更简单吗？像元素嵌套这样的信息对于最终用户来说并不感兴趣，开发人员应该知道如何在少数浏览器中使用开发工具。 – 2014-09-04 07:01:21

尝试以下，

$('table').click(function(event){ 
    // The event.target property returns which DOM element triggered the event. 
    // 
    var elem = event.target.nodeName; 
    // use this value to display in your way. 
})

Demo

来源

2014-09-04 06:56:29 VPK

请问您可以在JSFiddle中添加一个工作示例，因为我无法使其可行。我警告elem变量，但它不工作@Vaibhav Katole – MAT14 2014-09-04 07:51:29

我附上了一个演示，请检查。 @ MAT14 – VPK 2014-09-04 08:11:36

感谢它现在的作品，我忘了加载它的载入功能 – MAT14 2014-09-04 09:03:36

像这样的事情？

var $display = $('<div>TEST</div>'); 

$display 
    .css({ 
     position: 'absolute', 
     background: '#fff', 
     border: '1px solid #000', 
     padding: '2px 8px' 
    }) 
    .appendTo('body'); 

$(document).mousemove(function(e){ 
    var offset = $display.width()/2; 

    $display.css({ 
     top: e.pageY + 20, 
     left: e.pageX - offset 
    }); 
}); 

$('*').not($display).mouseenter(function(e){ 
    var tags = $(this).parents().map(function(){ 
     return this.tagName; 
    }).get().reverse().join(': '); 

    $display.html(tags); 
});

来源

2014-09-04 07:23:53 THEtheChad

通过鼠标点击或悬停来显示html表格标签名称

回答

相关问题