将 <a> 放在 <tr> 中的更好做法是什么

Question

这两种做法，哪个更好？

<tr onclick="window.document.location='http://link.com';">
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>
    <td>Lorem ipsum.</td>

或者

<tr>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
    <td><a href="http://link.com">Lorem ipsum.</a></td>
</tr>

我只想使用 JavaScript。

第一种方式我只重复了一次link，但是我没有使用a，在第二个例子中我使用了很多次 a 然后我重复 link.

Answer 1

出于多种原因，我会使用 HTML。

Separation of Concerns：CSS 和 JavaScript 的创建是为了将内容与表示与行为分开。
内联 JavaScript 由于前面的原因不推荐。您可以创建一个 script 标签，然后引用外部 javascript 文件，您在其中有一个代码。您应该使用 addEventListener.
如果您必须使用onclick，请仅将其用于调用函数。在你的例子中，onclick="window.document.location='http://link.com';" 确实很冗长并且占用了很多 space。它不干净html。这是 angular 和 bootstrap.
如果用户在他们的浏览器中禁用了 JavaScript，则 JavaScript 代码将无法正常工作。但是，传统的 HTML 仍然会。

他们都完成了同样的事情，但最佳实践在这里

<td><a href="http://link.com">Lorem ipsum.</a></td>

请看这个问题

Why is using onClick() in HTML a bad practice?

Answer 2

作为替代方法，您可以通过使用 css 表来解决重复问题并保持锚点功能（例如 SEO 原因）：

HTML:

<div class="table">
    <a href="http://link.com" class="table-row">
        <div class="table-cell">Lorem ipsum.</div>
        <div class="table-cell">Lorem ipsum.</div>
        <div class="table-cell">Lorem ipsum.</div>
        <div class="table-cell">Lorem ipsum.</div>
        <div class="table-cell">Lorem ipsum.</div>
    </a>
</div>

CSS:

.table { display:table; }
.table-row { display:table-row; }
.table-cell { display:table-cell; }

Answer 3

在可访问性方面，应该使用 tables 来呈现表格信息 http://www.w3.org/TR/WCAG20-TECHS/H51.html

每个 link 的用途可能由 link 文本决定 http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html

根据这两个要求，在我看来，几乎没有什么变化可以在 tr 中使用整个范围的表格数据来描述 link 的目的。

所以我认为您可以通过不使用 table 和不使用 javascript 来解决您的问题（例如参见 LcSalazar 的回答）

Answer 4

这个问题有可访问性标签，但只有 Adam 提到过。从最初的问题来看，第二个示例比第一个更易于访问，因为屏幕 reader 用户会知道每个单元格中都有链接，并且可以使用屏幕 reader 的快捷键（例如, JAWS 中的 Ctrl+Ins+F7 调出锚标签列表）。

如果您确实有 table（而不只是为了布局目的使用 table），那么请确保您有 table headers（) 并使用 scope='row|col' 选项，这样屏幕 reader 用户将能够在 table 的单元格中导航，并能够让自己定位在哪一行或哪一列他们开始了。

此外，第一个示例无法通过键盘访问，因为您只监听了 onclick。您还需要 onkeydown。

LcSalazar 的示例使用

是可以的，如果你想模仿一个 table 但如果你想要它可访问，你还需要指定 role='grid'、role='gridcell' 和 role='rowheader' 用于各种

。当您可以只使用本机 table 标签时，工作量很大。

将 <a> 放在 <tr> 中的更好做法是什么

What's the better practice to put <a> in <tr>

html

javascript

accessibility

list