javascript - 如何向表格添加标题和跨度

Question

这是现有的 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');

但我不知道如何为第一个表添加标题和跨度。报告

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

Answer 1

结果很简单。如果您需要澄清，请在评论中发表。

在问题中的 JS 行后面添加以下内容:

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