使用该行中的变量在每个表行之后插入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，使用td中最后一个tr的值来填充HTML中的变量。即上面的代码应如下所示：

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

在这个例子中，VALUE_TD将等于所有3行的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>标签内无效。

Answer 2

在每个tr之后创建一个div，如<div id="tr1"> </div>

通过使用jquery，您可以附加html脚本

$('#tr1').append('your script');