如何将标题和跨度添加到 table

Question

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

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

所以我已经通过添加此

将 table class 从 "two_column_layout" 更改为 "report"

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

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

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

Answer 1

我想你只是想给 table 添加一个标题？？那就用这个吧。

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

Answer 2

结果很简单。如果您需要说明，请在评论中post。

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

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

如何将标题和跨度添加到 table

how to add caption and span to table

html

javascript

jquery

jquery-selectors

prepend