相关疑难解决方法(0)

如何将表中的整行作为链接点击?

我正在使用Bootstrap,以下不起作用:

<tbody>
    <a href="#">
        <tr>
            <td>Blah Blah</td>
            <td>1234567</td>
            <td>£158,000</td>
        </tr>
    </a>
</tbody>
Run Code Online (Sandbox Code Playgroud)

html html-table bootstrap-4

402
推荐指数
15
解决办法
54万
查看次数

HTML表格行链接

将一行HTML表格作为链接的最佳方法是什么?我目前正在使用jquery对斑马条纹行进行突出显示onmouseover/off选定行,所以如果JavaScript是答案,请使用jquery.

html jquery html-table

13
推荐指数
2
解决办法
3万
查看次数

如何使用data-href打开新选项卡

我正在制作一个可点击的表格行,但一旦点击我想打开一个新标签.我尝试使用data-target但是没有用.

<tr class="table-row" data-href="mypage.php" data-target="_blank"></tr>

<script type="text/javascript">
    $(document).ready(function ($) {
        $(".table-row").click(function () {
            window.document.location = $(this).data("href");
        });
    });
</script>
Run Code Online (Sandbox Code Playgroud)

html javascript jquery

6
推荐指数
1
解决办法
3988
查看次数

将表行&lt;tr&gt;放在&lt;a&gt;标记内在语义上是否正确?

该表包含有关一组特定元素的数据,我希望该行的每个字段或所有行一起允许用户访问每个元素的详细信息。问题是我不知道如何进行,我要么:

将整行放在内<a>

<table>
    <a href=""><tr>…</tr></a>
    <a href=""><tr>…</tr></a>
    …
</table>
Run Code Online (Sandbox Code Playgroud)

或者只是将每个单元格的所有内容放入<a>

<table>
    <tr>
        <td><a href="">…</a></td>
        <td><a href="">…</a></td>
    </tr>
    …
</table>
Run Code Online (Sandbox Code Playgroud)

当然我更喜欢第一个,但是我不知道是否这样做是正确的。

这是我想到的用锚标记包围行的想法之一:

HTML5:用A来包装块级元素

更新:

我想我必须对此更加清楚一点,该表保存的数据可以显示系统中的概览Users

+----+------+-------+
| Id | Name | Score |
+----+------+-------+
| 1  | Foo  | 10    |
| 2  | Bar  | 8     |
| 3  | Baz  | 5     |
| …  | …    | …     |
| n  | Zzz  | 0     |
+----+------+-------+
Run Code Online (Sandbox Code Playgroud)

因此,我认为使用表格是正确的,但是每个用户都有3个以上的相关信息字段,因此我将使用链接来获取每个用户的详细信息(超过15个字段),否则这些内容将无法显示在单个信息上表格上的行(例如2048个字符以上的“注释”字段);这就是为什么我想到了显示指向每个用户细节的链接的想法。当然,我不在乎整个行是否都可单击,我只想通过不必将每个字段的所有数据都括入来清除代码<a>。另一个解决方案是创建一个额外的单元格来专门保存指向用户详细信息的链接,如下所示:

+----+------+-------+-------------------------+
| …
Run Code Online (Sandbox Code Playgroud)

html semantics

3
推荐指数
1
解决办法
3021
查看次数

标签 统计

html ×4

html-table ×2

jquery ×2

bootstrap-4 ×1

javascript ×1

semantics ×1