加入表行 [英] Join table rows

问题描述

我有一个未完成的表结构：

I have an unfinished table structure:

<table>
  <tr>
    <td>ID</td>
    <td>Animal</td>
    <td>color</td>
    <td>age</td>
  </tr>
  <tr>
    <td rowspan="2">1</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
  </tr>
</table>

我想追加以下行：

<table>
  <tr>
    <td>dog</td>
    <td>brown</td>
    <td>5</td>
  </tr>
  <tr>
    <td>cat</td>
    <td>white</td>
    <td>3</td>
  </tr>
  <tr>
    <td>cat</td>
    <td>black</td>
    <td>7</td>
  </tr>
  <tr>
    <td>mouse</td>
    <td>grey</td>
    <td>2</td>
  </tr>
</table>

这样决赛桌看起来像这样：

So that the final table looks like that:

<table>
  <tr>
    <td>ID</td>
    <td>Animal</td>
    <td>color</td>
    <td>age</td>
  </tr>
  <tr>
    <td rowspan="2">1</td>
    <td>dog</td>
    <td>brown</td>
    <td>5</td>
  </tr>
  <tr>
    <td>cat</td>
    <td>white</td>
    <td>3</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
    <td>cat</td>
    <td>black</td>
    <td>7</td>
  </tr>
  <tr>
    <td>mouse</td>
    <td>grey</td>
    <td>2</td>
  </tr>
</table>

我在每个循环中动态地创建该表，因此逐行。

I'm creating that table dynamically, in an each-loop, so row by row.

这是我的方法：

// 1st iteration
tr = "<tr><td>dog</td><td>brown</td><td>5</td></tr>";
$('table tr:eq(1)').append(tr)

// 2nd iteration
tr = "<tr><td>cat</td><td>white</td><td>3</td></tr>";
$('table tr:eq(1)').append(tr)

但结果并不像预期的那样。

But the result doesn't look as intended.

这是小提琴。

推荐答案

您需要为每个奇数列表项添加行号。这样你就可以在桌面上添加尽可能多的
项目。

You need to add row number every odd list item. That way you can add as many item as possible to your table.

var data = [
  '<tr><td>dog</td><td>brown</td><td>5</td></tr>',
  '<tr><td>cat</td><td>white</td><td>3</td></tr>',
  '<tr><td>cat</td><td>black</td><td>7</td></tr>',
  '<tr><td>mouse</td><td>grey</td><td>2</td></tr>',
  '<tr><td>dog</td><td>brown</td><td>5</td></tr>',
  '<tr><td>cat</td><td>white</td><td>3</td></tr>',
  '<tr><td>cat</td><td>black</td><td>7</td></tr>',
  '<tr><td>mouse</td><td>grey</td><td>2</td></tr>'
];

var rowNo = 1;
for (var i = 0; i <= data.length; i++) {
  var $current = $(data[i]); // Converting data to jQuery item.
  
  // On every odd row add row Number cell to the begining of <tr> tag.
  if ((i + 1) % 2 == 1) {
  	$current.prepend('<td rowspan="2">' + rowNo + '</td>');
    rowNo++;
  }
  
  $('table').append($current);
}

table,
tr,
td {
  border: 1px solid;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>ID</td>
    <td>Animal</td>
    <td>color</td>
    <td>age</td>
  </tr>
</table>

我也更新了你的JSFiddle。看看这个： JSFiddle

I also updated your JSFiddle. Check this out: JSFiddle

这篇关于加入表行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！