javascript - 使用该行中的变量在每个表格行之后插入 HTML

Question

你能帮我解决这个问题吗？

我有一个这样的表:

     <table>
     <th style="text-align: left; text-transform: capitalize;">Unique</th>
     <th style="text-align: left; text-transform: capitalize;">x1</th>
     <th style="text-align: left; text-transform: capitalize;">y2</th>
     <tr class="rowNormal">
     <td nowrap="true">a1</td>
     <td nowrap="true">b2</td>
     <td nowrap="true">b3</td>
     </tr>
     <tr class="rowAlternate">
     <td nowrap="true">a1</td>
     <td nowrap="true">b2</td>
     <td nowrap="true">b3</td>
     </tr>
     <tr class="rowNormal">
     <td nowrap="true">a1</td>
     <td nowrap="true">b2</td>
     <td nowrap="true">b3</td>
     </tr>
     </table>

我需要做的是在每个 tr 之后插入特定的 HTML，使用该 tr 中最后一个 td 的值来填充HTML 中的变量。IE。上面的代码应该如下所示:

     <table>
     <th style="text-align: left; text-transform: capitalize;">Unique</th>
     <th style="text-align: left; text-transform: capitalize;">x1</th>
     <th style="text-align: left; text-transform: capitalize;">y2</th>
     <tr class="rowNormal">
     <td nowrap="true">a1</td>
     <td nowrap="true">b2</td>
     <td nowrap="true">b3</td>
     </tr>
     <p>
     <ac:macro ac:name="mymacro">
     <ac:parameter ac:name="content">titles</ac:parameter>
     <ac:parameter ac:name="labels">+VALUE_TD +othervalue</ac:parameter>
     </ac:macro>
     </p>
     <tr class="rowAlternate">
     <td nowrap="true">a1</td>
     <td nowrap="true">b2</td>
     <td nowrap="true">b3</td>
     </tr>
     <p>
     <ac:macro ac:name="mymacro">
     <ac:parameter ac:name="content">titles</ac:parameter>
     <ac:parameter ac:name="labels">+VALUE_TD +othervalue</ac:parameter>
     </ac:macro>
     </p>
     <tr class="rowNormal">
     <td nowrap="true">a1</td>
     <td nowrap="true">b2</td>
     <td nowrap="true">b3</td>
     </tr>
     <p>
     <ac:macro ac:name="mymacro">
     <ac:parameter ac:name="content">titles</ac:parameter>
     <ac:parameter ac:name="labels">+VALUE_TD +othervalue</ac:parameter>
     </ac:macro>
     </p>
     </table>

在此示例中，对于所有 3 行，VALUE_TD 将等于 b3。

Answer 1

这里是使用 jQuery 函数 insertAfter 的示例.

See on jsFiddle

$(document).ready(function () {
    $.each($('tr'), function (i, row) {
        if (i != 0) {
            var lastTd = $(row).find('td:last-child')[0];
            $('<p>\
<ac:macro ac:name="mymacro">\
<ac:parameter ac:name="content">titles</ac:parameter>\
<ac:parameter ac:name="labels">' + lastTd.innerHTML + 'othervalue</ac:parameter>\
</ac:macro>\
</p>').insertAfter(row);
        }
    });
});

这是使用 jQuery 函数的另一个示例 after ，两者都有效，只是实现方式不同。

See on jsFiddle

$(document).ready(function () {
    $.each($('tr'), function (i, row) {
        if (i != 0) {
            var lastTd = $(row).find('td:last-child')[0];
            $(row).after('<p>\
<ac:macro ac:name="mymacro">\
<ac:parameter ac:name="content">titles</ac:parameter>\
<ac:parameter ac:name="labels">' + lastTd.innerHTML + 'othervalue</ac:parameter>\
</ac:macro>\
</p>');
        }
    });
});

我还想说，由于以下几个原因，这不是有效的 HTML:

• <th>的应该包裹在 <tr> 中.
• <p>标签在 <table> 内无效标签。