在表

时间:2016-06-09 08:25:08

标签: javascript jquery html

我有一个包含2-4列和9行的表。一些非常正确的列有一个文本(abc),一些有图像,有些有两个,有些可能没有。

我想将第二列的内容复制到3个新创建的列中,但是将它们插入中间(abc之前和图像,如果适用)。所以它看起来像那样:

enter image description here

这种方法:

$("table td:nth-child(2) [id$=2]").each(function(i) {
  var $newCell = $(this).wrap('<td></td>').parent();
  var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
  $(this).parents('tr').remove();
  if ($newRow.find("td:contains('abc')").index() > -1) {
    $newRow.find("td:contains('abc')").before($newCell);
  } else if ($newRow.find("td.img").index() > -1) {
    $newRow.find("td:contains('img')").before($newCell);
  } else {
    $newRow.find("td:contains('img')").before($newCell);
  }
});

$("table td:nth-child(2) [id$=3]").each(function(i) {
  var $newCell = $(this).wrap('<td></td>').parent();
  var $newRow = $("table td:nth-child(2) [id$=1]").eq(i).parents('tr');
  $(this).parents('tr').remove();
  if ($newRow.find("td:contains('abc')").index() > -1) {
    $newRow.find("td:contains('abc')").before($newCell);
  } else if ($newRow.find("td.img").index() > -1) {
    $newRow.find("td:contains('img')").before($newCell);
  } else {
    $newRow.find("td:contains('img')").before($newCell);
  }
});

产生以下结果:

enter image description here

FIDDLE

1 个答案:

答案 0 :(得分:4)

要实现此目的,您可以使用:nth-child遍历每个第三行,并将每个行所需的td附加到集合的第一行。从那里你可以remove()不需要的行,如下所示:

for (var i = 0; i < $('table tr').length / 3; i++) {
    var $rows = $('table tr:nth-child(3n+' + i + ')');
    $rows.not(':first').addClass('remove').find('td:eq(1)').insertAfter($rows.first().find('td:eq(1)'));
}
$('table .remove').remove();

Updated fiddle