如何在表格中添加标题和跨度

Posted 2023-04-13

【中文标题】如何在表格中添加标题和跨度

【英文标题】：how to add caption and span to table

【发布时间】：2015-07-03 16:55:30

【问题描述】：

这是现有的 html，是的，开发人员使用了嵌套表格，我无法更改现有的 HTML，但我需要替换表格类，然后仅在主表格中添加标题和跨度。

<table class="two_column_layout" align="center">
<tbody>
    <tr>
        <td class="two_column_layout" valign="top">
            <table class="report" align="center" cellspacing="1"></table>
        </td>
        <td class="two_column_layout" valign="top">
            <table class="report" align="center" cellspacing="1"></table>
        </td>
    </tr>
    <tr>
        <td class="two_column_layout" valign="top">
            <table class="report" align="center" cellspacing="1"></table>
        </td>
        <td class="two_column_layout" valign="top">
            <table class="report" align="center" cellspacing="1"></table>
        </td>
    </tr>
</tbody>

我需要新的 html 看起来像这样

<table class="report" align="center">
<caption>
    <span>
        Weekly Results
    </span>
</caption>
<tbody>
    <tr>
        <td class="two_column_layout" valign="top">
            <table class="report" align="center" cellspacing="1"></table>
        </td>
        <td class="two_column_layout" valign="top">
            <table class="report" align="center" cellspacing="1"></table>
        </td>
    </tr>
    <tr>
        <td class="two_column_layout" valign="top">
            <table class="report" align="center" cellspacing="1"></table>
        </td>
        <td class="two_column_layout" valign="top">
            <table class="report" align="center" cellspacing="1"></table>
        </td>
    </tr>
</tbody>

所以我已经通过添加这个将表类从“two_column_layout”更改为“report”

$('#body_options_22 table').removeClass('two_column_layout').addClass('report');

但我不知道如何仅为第一个 table.report 添加标题和跨度

<caption>
    <span>
        Weekly Results
    </span>
</caption>

【参考方案1】：

结果很简单。如果您需要澄清，请在 cmets 中发布。

在问题中的 JS 行之后添加：

$('table.report').first().prepend('<caption><span>Weekly Results</span></caption>');

【讨论】：

对于屏幕阅读器（可访问性），由于 chrome 和 firefox 实现中的错误， 应该描述表格是什么，这里可以，但还需要有表格标题行： 。如果没有 行，屏幕阅读器将无法正确读取 。他们应该但不应该。您还应该添加 （“1”，随便什么），以便用户可以通过表格浏览表格并阅读标题，以找到他们想要的表格。如果您不希望表头在 th 标签上设置 font-size:0px 和 height:0px 。谢谢脚本！！！

【参考方案2】：

我想你只是想在表格中添加一个标题？？ 那就用这个吧。

$("table").prepend("<caption><span>Weekly Results</span></caption>");