0

I've read this question from SO but failed to implement it to my needs. Could you help me?

I have this plugin-generated html:

<table cellspacing="0" class="grid" style="width: 30%">
<tr>
<th colspan="13" style="text-align: left; ">
<a rel="nofollow" href="http://...">Unique</a>&nbsp;(1&nbsp;issues) </th>
</tr>
<tr>
<th style="text-align: left; text-transform: capitalize;">Head1</th>
<th style="text-align: left; text-transform: capitalize;">Head2</th>
<th style="text-align: left; text-transform: capitalize;">Head3</th>
<th style="text-align: left; text-transform: capitalize;">Head4</th>
<th style="text-align: left; text-transform: capitalize;">Head5</th>
<th style="text-align: left; text-transform: capitalize;">Head6</th>
<th style="text-align: left; text-transform: capitalize;">Head7</th>
<th style="text-align: left; text-transform: capitalize;">Head8</th>
<th style="text-align: left; text-transform: capitalize;">Head9</th>
<th style="text-align: left; text-transform: capitalize;">Head10</th>
<th style="text-align: left; text-transform: capitalize;">Head11</th>
<th style="text-align: left; text-transform: capitalize;">Head12</th>
<th style="text-align: left; text-transform: capitalize;">Head13</th>
</tr>
<tr class="rowNormal">
<td nowrap="true">

<p><a href="http:...">Data1</a></p>
</td>
<td nowrap="true">

Data 2, 2 ,2
</td>
<td nowrap="true">

 Data 3, 3, 3
 </td>
 <td nowrap="true">

 <img src="http://..." alt="" border="0" /> Data4
 </td>
 <td nowrap="true">

 Green
 </td>
 <td nowrap="true">

 Smith, John
 </td>
 <td nowrap="true">

 Fritz, Scott
 </td>
 <td nowrap="true">

 Data6
 </td>
<td nowrap="true">

 Data7
 </td>
 <td nowrap="true">

 Data 8
 </td>
 <td nowrap="true">

  Data9
 </td>
 <td nowrap="true">

 345
 </td>
 <td nowrap="true">

 764
 </td>
 </tr>
 </table>

Which i transform after a couple of passes:

  $("table:contains('Unique')").removeClass("grid");
  $("table:contains('Unique')").find("th").parent("tr").addClass("hidden");
  $("table:contains('Unique')").find("img").addClass("hidden");
  $("table:contains('Unique') td[nowrap='true']").wrap("tr");

into a column of DataX

Now I want to append each of this Data as a row to this existing table:

          <div class="table-wrap"><table class="mytable"><tbody><tr><td colspan="1" class="tabletd"><strong>name1</strong></td></tr><tr><td colspan="1" class="tabletd"><strong>name 2</strong></td></tr><tr><td class="tabletd"><strong>name 3</strong></td></tr><tr><td colspan="1" class="tabletd"><strong>name4</strong></td></tr><tr><td class="tabletd"><strong>name2</strong></td></tr><tr><td colspan="1" class="tabletd"><strong>name5</strong></td></tr><tr><td colspan="1" class="tabletd"><strong>name 6</strong></td></tr><tr><td colspan="1" class="tabletd"><strong>name 7</strong></td></tr><tr><td colspan="1" class="tabletd"><strong>name 8 </strong></td></tr><tr><td colspan="1" class="tabletd"><strong>name 9<br /> </strong></td></tr><tr><td colspan="1" class="tabletd"><strong>name 10</strong></td></tr><tr><td colspan="1" class="tabletd"><strong>digit 1<br /> </strong></td></tr><tr><td colspan="1" class="tabletd"><strong>digit 2<br /> </strong></td></tr></tbody></table></div>

So that in the result I have rows of one cell from the second table, one from the first. I.e:

       Name 1      Data1
       Name 2      Data2
       Name 3      Data2

etc

Any help much appreciated.

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Easy Life
  • 262
  • 5
  • 14
  • http://stackoverflow.com/questions/15111393/add-a-row-to-an-existing-table ? – Stefan Feb 27 '13 at 11:53
  • i would cache you table object: var table = $("table:contains('Unique')") then use .append() to add your code to it (but don't forget you will need to create the row and column with the correct colspan) – Pete Feb 27 '13 at 12:02
  • Doesn't append add rows below, not columns to the right? I will have to go through each tr somehow, as the linked question suggests. – Easy Life Feb 27 '13 at 12:12

1 Answers1

0

Take a look at the .append Jquery method : http://api.jquery.com/append/

You will probably want to do somthing like :

$(your_table).append($(your_data).wrap("<tr></tr>"));

Wich will :

  1. Create a jquery object with your_data
  2. Enclose these in a element
  3. Add all of this in your_table
almathie
  • 731
  • 5
  • 22
  • That's exactly what I have problems with - I need to append not the original html, but the one processed by the jqueries above. I really don't know how to do that, hence this question. – Easy Life Feb 27 '13 at 12:02
  • JQuery can manipulate elements ourside the DOM. So you can use .clone (http://api.jquery.com/clone/) to create a copy of your original table. Do the processing on that object (wich is not in the DOM) and add the processed object to your target table. – almathie Feb 27 '13 at 12:04
  • Hm, won't it append the data as rows below, not as a column on the right as I need? The question I linked at the top appends cell by cell. – Easy Life Feb 27 '13 at 12:11