开发者问题收集

连接表格行

2017-02-08
81
javascript jquery html html-table

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

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

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

这是一个小提琴 。

3个回答

在第一次迭代中，您应该将 tr 主体附加到现有行中（不带父标签）。 在第二次迭代中，您应该将 tr 放在现有行之后。 

/* 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)
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>
  <tr>
    <td rowspan="2">1</td>
  </tr>
  <tr>
    <td rowspan="2">2</td>
  </tr>
</table>
pan.goth
2017-02-08
  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)
Z-Bone
2017-02-08

您需要为每个奇数列表项添加行号。这样，您就可以向表中添加尽可能多的项目。 

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

Valour
2017-02-08