删除空行并将内容从表移动到另一行

Question

我有桌子：

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<table class="table-bordered" width="100%">

<tr>

<th>Product</th>
<th>Service</th>

</tr>
<tr>
<td>Product 1</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S13</td>
</tr>
<tr>
<td></td>
<td>S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S120</td>
</tr>
</table>

我需要：带有产品的空行（产品名称为空）删除该行并将服务移至上一个产品行，并从上一个产品中删除当前服务。示例：

在此表中，我们有product 1。我需要删除S11并粘贴：S13和S14单行。

我需要此表作为结果：

    
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
    <table class="table-bordered" width="100%">

    <tr>

    <th>Product</th>
    <th>Service</th>

    </tr>
    <tr>
    <td>Product 1</td>
    <td>S13, S14</td>
    </tr>
    <tr>
    <td>Product 2</td>
    <td>S120</td>
    </tr>
    </table>

我认为我们可以使用javascript或jquery做到这一点。我尝试编写以下代码：

$('table tr').each(function () {
 if (!$.trim($(this).text())) $(this).remove();
});

但这只会删除空行。

Answer 1

for (var x= 0; x < $("table.table-bordered").children[0].children.length; x++) // loop through all table rows.
    {
      if($("table.table-bordered").children[0].children[x].children[1].outerHTML.indexOf(',') != -1) // if the second td  of the table contains a comma
      {
        var arr = $("table.table-bordered").children[0].children[x].children[1].innerHTML.split(','); // split the array so you make as many rows as needed
        for (var y = 1; y < arr.length; y++) { // loop trough the array
          var row = document.createElement('tr'); // create a new row
          var first = document.createElement('td');
          row.append(first) // create a empty td and add it to the row
          var second = document.createElement('td'); // create another td
          second.append(arr[y]); // append the value (whats after the comma)
          row.append(second); // add it to the row
          $("table.table-bordered > tbody").append(row); // add the row to the table
        }
      };
    }

通过这种方式，我设法在表中添加了一行，但是我没有时间将其添加到正确的位置，但是您可以自己调查一下。

我希望这会有所帮助，但是老实说，我认为您最好在后端进行更改。

Answer 2

let tr
$('table tr').each(function () {

 if($(this).find('td:nth-child(1)').text().length){
    tr = $(this)
    tr.find('td:nth-child(2)').text('')
 }else{
    let td = $(tr).find('td:nth-child(2)')
    td.text(td.text() + ' ' +  $(this).find('td:nth-child(2)').text())
    $(this).remove()
 }
 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">

<table class="table-bordered" width="100%">

<tr>

<th>Product</th>
<th>Service</th>

</tr>
<tr>
<td>Product 1</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S13</td>
</tr>
<tr>
<td></td>
<td>S14</td>
</tr>
<tr>
<td>Product 2</td>
<td>S11</td>
</tr>
<tr>
<td></td>
<td>S120</td>
</tr>
</table>