javascript - 通过鼠标单击或悬停显示 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 使用点击事件。但还有其他方法可以做到这一点吗？提前致谢!!

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

Demo