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>

出局

现在我想做的就是当我点击用户/国家时它会显示：＆＃34; thead：th＆＃34;当我将鼠标指向abc或cdf时，它将显示：＆＃34; tr：td＆＃34;。

我想要做的是为每个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.
})

Demo

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

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

2 个答案: