CODEWITHSUNDEEP
javascriptjqueryhtmlhtml-tableconfluence
Easy Life
Easy Life

Reputation: 262

Insert HTML after each table row using variables from that row

Could you help me out with this?

I have a table like this:

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

What I need to do is insert certain HTML after each tr, using the value of the last td in that tr to populate a variable inside that HTML. I.e. the code above should look like:

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

In this example, VALUE_TD will equal b3 for all 3 rows.

Upvotes: 0

Views: 1155

Answers (2)

Abhi
Abhi

Reputation: 1115

Create one div after each tr like <div id="tr1"> </div>

By using jquery you can append html script

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

Upvotes: 0

Daniel Imms
Daniel Imms

Reputation: 50229

Here is an example using the jQuery function 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);
        }
    });
});

Here is another example using the jQuery function after, both work they are just different ways of doing it.

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>');
        }
    });
});

I would also like to say that this isn't valid HTML for a few reasons:

  • The <th>'s should be wrapped in a <tr>.
  • The <p> tags are not valid inside a <table> tag.

Upvotes: 2

Related Questions