Replace <td> with <tr><td> using jQuery

Question

I'm doing a lazy-ass table transpose here. 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>
     </table>

which I need to look like this:

     <table>
     <tr class="rowNormal">
     <tr><td nowrap="true">a1</td><.tr>
     <tr><td nowrap="true">b2</td></tr>
     <tr><td nowrap="true">b3</td></tr>
     </tr>
     </table>

It only has two rows, one of which is header. So I hide the header like this:

        $("table:contains('Unique')").find("th").addClass("hidden");

Which works fine. Now I need to add a <tr> to each <td nowrap="true">, and here where I have trouble. I use this:

       $('div.content').html($('div.content').html().replace(/<td nowrap="true">/g,' <tr><td nowrap="true">'));

which works, but I want to narrow it to the table containing "Unique", without using global. This

       $('div.content').html($('div.content').html().replace(/</td>/g,'<td></tr>'));

doesn't work at all. I tried playing with replaceWith and replaceAll, but failed to do the trick. Questions: 1) The best way to add the formatting to transpose the remaining row into a column? 2) How can I specify " and / as parameters? 3) What's the difference between 'and "?

Thank you for your time.

Answer 1

You can use wrap in jQuery to do that:

$("td[nowrap='true']").wrap("tr");

Or for items only with your Unique contains selector:

$("table:contains('Unique') td[nowrap='true']").wrap("tr");