将 td 移动到新的列中。

Question

我有一个类似这样的表：

<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
  </tr>
  <tr>
    <td>some column|2</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|2</td>
    <td id="def|2">def</td>
  </tr>
</table>

我该如何将后缀为|2的tds向右移动，以添加第三列？ 同时，其余“空”td，“some column|2”和“another column|2”应完全删除。

最终结果应如下所示：

以下是期望的代码：

<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
    <td id="def|2">def</td>
  </tr>
</table>

这是我的做法，但并不可行：

$("table td:nth-child(2)[id$=2]").after("table td:nth-child(2)");

FIDDLE链接。

- Evgenij Reznik

Answer 1

请使用以下代码。

var firstTd = $("table").find("tr:nth-child(3) > td:nth-child(2)");
var secondTd = $("table").find("tr:nth-child(4) > td:nth-child(2)");

$("table").find("tr:nth-child(3), tr:nth-child(4)").remove();
$("table").find("tr:nth-child(1)").append(firstTd);
$("table").find("tr:nth-child(2)").append(secondTd);

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
  </tr>
  <tr>
    <td>some column|2</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|2</td>
    <td id="def|2">def</td>
  </tr>
</table>

- Mohammad

Answer 2

一种实现你想要的方法是：

// Values for new column to be added
var newVals = $("table td:nth-child(2)[id$=2]");

$("table td:nth-child(2)[id$=1]").each(function (ind) {
  if (ind < newVals.length) {
    // Get New Element to add
    var newElement = newVals[ind];
    // Remove original row for this element
    $(newElement).parent().remove();
    // Append to new column
    $(this).after($(newElement));                
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>some column|1</td>
    <td id="abc|1">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def|1">def</td>
  </tr>
  <tr>
    <td>ome column|2</td>
    <td id="abc|2">abc</td>
  </tr>
  <tr>
    <td>another column|2</td>
    <td id="def|2">def</td>
  </tr>
</table>

- Chitrang

Answer 3

尝试使用下划线作为分隔符更改ID，例如：abc_1，并尝试此代码（FIDDLE）：

HTML

<table>
  <tr>
    <td>some column|1</td>
    <td id="abc_1" class="text-cell">abc</td>
  </tr>
  <tr>
    <td>another column|1</td>
    <td id="def_1" class="text-cell">def</td>
  </tr>
  <tr>
    <td>ome column|2</td>
    <td id="abc_2" class="text-cell">abc</td>
  </tr>
  <tr>
    <td>another column|2</td>
    <td id="def_2" class="text-cell">def</td>
  </tr>
</table>

jQuery

var tbl = $('table');
tbl.find('tr').each(function() {
    var row = $(this);
  var txtCell = row.find('.text-cell');
  var cellId = txtCell.attr('id');
  var cellArr = cellId.split('_');
  var idLeft = cellArr[0];
  var idRight = cellArr[1];
  if (idRight == '1') {
      var child = $('#' + idLeft + '_2');
      var cTxt = child.text();
      child.closest('tr').remove();
      row.append('<td>' + cTxt  + '</td>');      
  }
});

- kapantzak

Answer 4

这是我会做的方式：

<script>
   $("table [id$='|2']").each(function(){
     var id = $(this).attr('id').split('|')[0];
     $("#"+id+"\\|1").parent().append('<td>'+$(this).html()+'</td>');
     $(this).parent().remove();
   });
</script>

- Hozeis