加入表行

Question

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

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

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

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

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

这是我的方法：

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

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

Here is a fiddle

Answer 1

在第一次迭代中，您应该在现有行中添加 tr 正文（没有父标记）。 在第二次迭代中，您应该在现有行之后放置 tr 。

＆＃13;

＆＃13;

/* The rows to append
 <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>
*/

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

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

// 3rd iteration
tr = "<tr><td>cat</td><td>black</td><td>7</td></tr>";
$('table tr:eq(3)').append($(tr).html())

// 4th iteration
tr = "<tr><td>mouse</td><td>grey</td><td>2</td></tr>";
$('table tr:eq(3)').after(tr)

＆＃13;

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

＆＃13;

<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>
  <tr>
    <td rowspan="2">1</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
  </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

1. 第一次迭代应该只包含<td>而不是<tr>，因为您要将其添加到现有行。您不希望将<tr>附加到其他<tr>
2. 在第二次迭代中使用after()。在这里，您应该使用<tr>

尝试将其更改为以下内容：

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

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

Answer 3

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

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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