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

时间:2013-03-05 08:33:17

标签: javascript jquery html html-table confluence

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

我有一张这样的表:

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

2 个答案:

答案 0 :(得分:2)

以下是使用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>标记内无效。

答案 1 :(得分:0)

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

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

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