用< a>javascript模拟鼠标悬停和点击行为

djmepvbi 于 2023-01-16 发布在 Java

关注(0)|答案(1)|浏览(219)

我有一个表，每行都应该链接到一个页面。
我希望保持html的结构不变（而不是一堆div和一个网格，就像用标签 Package HTML表格行一样）
javascript的一切工作，但我错过了左下角的工具提示，显示从一个标签悬停的网址，我还希望选择打开一个新的标签与CMD（mac）或CTRL（windows/linux）。
我目前正在使用jQuery进行解决方案：

$('.clickable-row').on('click', function () {
        const url = $(this).attr('data-url')
        if (typeof url === 'string') {
            window.location.href = url
        }
    });

我的html（小树枝）：

<table class='table'>
            <thead>
                <tr>
                    {% for h in data.header %}
                        <th>{{h|trans}}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for row in data.rows %}
                    {% set url = data.getOnClickURL(loop.index - 1) %}
                    <tr {% if url %} class='clickable-row' data-url="{{url}}" {% endif %}>
                        {% for r in row %}
                                <td>{{r|trans}}</td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>

JavaScript

来源：https://stackoverflow.com/questions/75111252/mimic-a-behavior-on-hover-and-on-click-with-javascript

1条答案

按热度按时间

cyej8jka1#

请尝试此解决方案，但不要仅使用HTML和CSS编写Javascript代码。

table {
    width: 100%;
    border-collapse: collapse;
}

table tr {
    position: relative;
}
table tr td {
    border: 1px solid black;
    text-align: center;
}

table tr a {
    position: absolute;
    width: 100%;
    display: block;
    height: 100%;
    top: 0px;
    left: 0px;
}

<table>
  <tr>
    <td><a href="https://google.com"></a> 1 </td>
    <td>2 </td>
    <td>3 </td>
  </tr>
<tr>
    <td><a href="https://github.com"></a>1 </td>
    <td>2 </td>
    <td>3 </td>
</tr>
<tr>
    <td><a href="https://stackoverflow.com/"></a>1 </td>
    <td>2 </td>
    <td>3 </td>
</tr>
<tr>
    <td>1 </td>
    <td>2 </td>
    <td>3 </td>
</tr>
<tr>
    <td>1 </td>
    <td>2 </td>
    <td>3 </td>
</tr>
</table>

赞(0）回复(0）举报 2023-01-16

我来回答

用< a>javascript模拟鼠标悬停和点击行为

1条答案

相关问题

热门标签

最新问答