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>

如何将带有后缀tds的{{1}}移到右侧，以便添加第3列？另外，应该完全删除剩余的“空”td“some column | 2”和“another column | 2”。

最终结果应如下所示：

这是所需的代码：

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

FIDDLE

Answer 1

使用此代码

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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>

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

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>

将td移动到新列

4 个答案: