如何在表中连接行

Question

我正在寻找项目的帮助。我想转换我的HTML表格

从：

    A   B   C   D   E   F       
217                     x
221                     x
275                 x   
275     x               
290 x       x           

到：

    A   B   C   D   E   F
217                     x
221                     x
275     x           x   
290 x       x           

在第一个表中有2行，编号为275，如何将它们合并在一起？

Answer 1

对于html表，在循环遍历行时使用散列映射来跟踪唯一行。找到重复项后，将文本与存储的行合并，然后删除重复的

＆＃13;

＆＃13;

var uniqueRows = {};

$('tbody tr').each(function(){
   var $row = $(this), 
        num = $row.find('td:first').text().trim();
   if(!uniqueRows[num]){
     // store this row object for future text merge
     uniqueRows[num] = $row
   }else{
      // match found, merge the text
      uniqueRows[num].find('td').text(function(i, existText){
           return existText ? existText : $row.find('td').eq(i).text()
       });
       $row.remove();
   }
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>
      </th>
      <th>A
      </th>
      <th>B
      </th>
      <th>C
      </th>
      <th>D
      </th>
      <th>E
      </th>
      <th>F
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>217</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <td>221</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <td>275</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>x</td>
      <td></td>
    </tr>
    <tr>
      <td>275</td>
      <td></td>
      <td>x</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    
    <tr>
      <td>275</td>
      <td></td>
      <td></td>
      <td>x</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>290</td>
      <td>x</td>
      <td></td>
      <td>x</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

第三种选择 - 保存内容并重写

$(function() {
  let cont = {};
  $("table>tbody>tr").each(function(_, row) {
    var key = $("td:first", row).text();
    if (cont[key] == undefined) cont[key] = [];
   $("td", row).each(function(i,cell) {
      let text = $.trim(cell.innerText);
      if (cont[key][i] == undefined || cont[key][i] =="") cont[key][i] = text;
    });
  });
  $("table>tbody").empty();
  $.each(cont,function(key,arr) {
    $("table>tbody").append("<tr><td>"+arr.join("</td><td>")+"</td></tr>");
  })
});

  td {
  border: 1px solid black

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>A</th>
      <th>B</th>
      <th>C</th>
      <th>D</th>
      <th>E</th>
      <th>F</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>217</td>
      <td></td>
      <td></td>
      <td> </td>
      <td>x</td>
      <td>x</td>
    </tr>
    <tr>
      <td>221</td>
      <td></td>
      <td></td>
      <td> </td>
      <td>x</td>
      <td></td>
    </tr>
    <tr>
      <td>275</td>
      <td> </td>
      <td></td>
      <td>x</td>
      <td> </td>
      <td>x</td>
    </tr>
    <tr>
      <td>275</td>
      <td>x</td>
      <td>x</td>
      <td>x</td>
      <td> </td>
      <td></td>
    </tr>
    <tr>
      <td>290</td>
      <td>x</td>
      <td></td>
      <td>x</td>
      <td> </td>
      <td></td>
    </tr>
  </tbody>
</table>

Answer 3

尝试以下方法：

它会在每个td的第一个tr中搜索重复的字词。如果匹配，则会将内容移至第一个tr，然后移除重复的tr

var arr = [];

$("table tbody tr").each(function() {
  arr.push($(this).find("td:first").text())
})
var sorted_arr = arr.slice().sort();
var results = [];
for (var i = 0; i < arr.length - 1; i++) {
  if (sorted_arr[i + 1] == sorted_arr[i]) {
    results.push(sorted_arr[i]);
  }
}

$.each(results, function(i, x) {
  var tr = $("table tbody tr td:contains(" + x + "):first").parent()
  $(tr).nextAll("tr").find("td:contains(" + x + "):first").each(function(k, l) {
    var s = $(l).parent();
    $(s).children("td").each(function(t, u) {
      if ($(u).text() == "x") {
        var td = $(tr).find("td:eq(" + t + ")")
        td.text(td.text() + $(u).text())
      }
    })
    s.remove();
  })
})

var arr = [];

$("table tbody tr").each(function() {
  arr.push($(this).find("td:first").text())
})
var sorted_arr = arr.slice().sort();
var results = [];
for (var i = 0; i < arr.length - 1; i++) {
  if (sorted_arr[i + 1] == sorted_arr[i]) {
    results.push(sorted_arr[i]);
  }
}

$.each(results, function(i, x) {
  var tr = $("table tbody tr td:contains(" + x + "):first").parent()
  $(tr).nextAll("tr").find("td:contains(" + x + "):first").each(function(k, l) {
    var s = $(l).parent();
    $(s).children("td").each(function(t, u) {
      if ($(u).text() == "x") {
        var td = $(tr).find("td:eq(" + t + ")")
        td.text(td.text() + $(u).text())
      }
    })
    s.remove();
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<table>
  <thead>
    <tr>
      <th>
      </th>
      <th>A
      </th>
      <th>B
      </th>
      <th>C
      </th>
      <th>D
      </th>
      <th>E
      </th>
      <th>F
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>217</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <td>221</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>x</td>
    </tr>
    <tr>
      <td>275</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
      <td>x</td>
      <td></td>
    </tr>
    <tr>
      <td>275</td>
      <td></td>
      <td>x</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    
    <tr>
      <td>275</td>
      <td></td>
      <td></td>
      <td>x</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
      <td>290</td>
      <td>x</td>
      <td></td>
      <td>x</td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>