Javascript 通过鼠标单击或悬停显示html表标记名

我已经写了一个html代码，其中显示了一个表。现在我想做的是，单击或将鼠标悬停在表上，然后显示标记名。因为我是jquery新手，所以无法组织jquery中的逻辑。 下面的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>

使用者
国家
城市
沥青酸盐
abc
abc
abc
abc
cdf
cdf
cdf
cdf

出局

现在我想做的是，当我点击用户/国家时，它会显示：“thead:th”，当我将鼠标指向abc或cdf时，它会显示：“tr:td”

我想做的是为每个tr td使用click事件。但是有没有别的办法呢。提前谢谢

试试下面的内容

$('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.
})

像这样的事

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

var$display=$（'TEST'）；
$display
.css({
位置：'绝对'，
背景：“#fff”，
边框：“1px实心#000”，
填充：“2px 8px”
})
.附于（“主体”）；
$（文档）.mousemove（函数（e）{
var offset=$display.width（）/2；
$display.css({
顶部：e.pageY+20，
左：e.pageX-偏移量
});
});
$（'*'）。非（$display）。鼠标指针（函数（e）{
var tags=$（this.parents（）.map（function（））{
返回此.tagName；
}).get（）.reverse（）.join（“：”）；
$display.html（标签）；
});

在浏览器中使用现有的开发人员工具不是更简单吗？像元素嵌套这样的信息对最终用户来说几乎不感兴趣，开发人员应该知道如何在一些浏览器中使用开发工具。请您在JSFIDLE中添加一个工作示例，因为我无法使其可行。我提醒elem变量，但它不工作@Vaibhav KatoleI已附上演示，请检查@MAT14谢谢，它现在可以工作了，我忘了添加加载功能