Question

Between this two practices, what's the better?

<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>

Or

<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>

I want to use only JavaScript.

In the first way I repeat only one time link, but I don't use a, in the second example I use many a and I repeat the link.

Answer 1

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

HTML：

class SearchProducts extends AsyncTask<String, Void, Integer> {
    final List<RowItem> rowItem = new ArrayList<RowItem>();
    final int SUCCESS = 0;
    final int FAILURE = SUCCESS + 1;
    ProgressDialog dialog;

    @Override
    protected void onPreExecute() {
        super.onPreExecute();
        dialog = ProgressDialog.show(FlipkartProducts.this, "", getString(R.string.searchingflipkart));
    }

    @Override
    protected Integer doInBackground(String... params) {
        try {

            String urlString = "https://affiliate-api.flipkart.net/affiliate/api/royarnab8.json";
            URL url = new URL(urlString);

            InputStream inputStream = url.openConnection().getInputStream();
            String response = streamToString(inputStream);
            JSONObject jsonObject = (JSONObject) new JSONTokener(response).nextValue();
            JSONArray jsonArray = jsonObject.getJSONArray("apiGroups");
            int a = jsonArray.length();
            Log.d("The length of the array is", "" + a);

            for (int i =0; i<jsonArray.length(); i++) {

                JSONObject mainImageJsonObject = jsonArray.getJSONObject(i).getJSONObject("affiliate")
                        .getJSONObject("apiListings");
                String categories = mainImageJsonObject.getString("apiName");

                RowItem ri = new RowItem(categories);
                rowItem.add(ri);

            }
            return SUCCESS;

        } catch (Exception e) {
            e.printStackTrace();
        }

        return FAILURE;
    }

    @Override
    protected void onPostExecute(Integer result) {
        super.onPostExecute(result);
        dialog.dismiss();
        if (result == SUCCESS) {
            lv.setAdapter(new SavedUrlAdapter(FlipkartProducts.this,rowItem));
        } else {
            Toast.makeText(FlipkartProducts.this, getString(R.string.errorfk), Toast.LENGTH_LONG).show();
        }
    }
}
public static String streamToString(InputStream p_is)
{
    try
    {
        BufferedReader m_br;
        StringBuffer m_outString = new StringBuffer();
        m_br = new BufferedReader(new InputStreamReader(p_is));
        String m_read = m_br.readLine();
        while(m_read != null)
        {
            m_outString.append(m_read);
            m_read =m_br.readLine();
        }
        return m_outString.toString();
    }
    catch (Exception p_ex)
    {
        p_ex.printStackTrace();
        return "";
    }
}

CSS：

<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>

Answer 2

这个问题有可访问性标记，但它只是被Adam所触及。从原始问题来看，第二个示例比第一个示例更易于访问，因为屏幕阅读器用户将知道每个单元格中都有链接，并且可以使用屏幕阅读器快捷键导航到链接（例如，在JAWS中按Ctrl + Ins + F7提出一个锚标签列表。）

如果您真的有一张桌子（而不仅仅是用于布局目的），那么请确保您有表格标题（＆lt; th＆gt;）并使用scope ='row | col'选项以便屏幕显示读者用户将能够浏览表格的单元格，并能够自己定位在他们所在的行或列上。

此外，第一个示例不是键盘可访问的，因为您只是在侦听onclick。你还需要onkeydown。

使用＆lt; div＆gt;的LcSalazar示例如果您正在尝试模仿某个表但是如果您希望它可以访问，那么您还需要指定role ='grid'，role ='gridcell'，以及role ='rowheader'用于各种＆lt; div＆gt;的。当你可以使用本机表标签时，这是很多工作。

Answer 3

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

并且每个链接的目的可能由链接文本确定 http://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html

根据这两个要求，在我看来，很少有变化可以使用tr内的一系列表格数据来描述链接的目的。

所以我认为您可以通过不使用表而不使用javascript来解决您的问题（例如，请参阅LcSalazar答案）

更好的做法是放置<a> in

3 个答案: