通过鼠标单击或悬停显示html表标签名称

Question

我写了一个显示表的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>

输出

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

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

Answer 1

尝试跟随，

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

演示

Answer 2

像这样吗

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