在现有表中添加一行

时间:2013-02-27 11:50:15

标签: jquery html-table

我已阅读this question from SO但未能按照我的需要实施它。你能帮帮我吗?

我有这个插件生成的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>

经过几次传球我会改变:

  $("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");

到DataX的一列

现在我想将每个数据作为一行附加到此现有表中:

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

因此,在结果中,我有第二个表中的一个单元格的行,第一个表格中有一个单元格。即:

       Name 1      Data1
       Name 2      Data2
       Name 3      Data2

任何帮助都非常感激。

1 个答案:

答案 0 :(得分:0)

看一下.append Jquery方法:http://api.jquery.com/append/

您可能希望做类似的事情:

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

将会:

  1. 使用your_data
  2. 创建一个jquery对象
  3. 将这些内容包含在元素中
  4. 在your_table
  5. 中添加所有内容