Question

我有以下HTML表：

Date          Desc
2018-10-01    Description 1
2018-10-01    Description 2
2018-10-01    Description 3
2018-10-01    Description 4
2018-10-02    Description 1
2018-10-02    Description 2
2018-10-02    Description 3

我想要的是这样的东西：

Date          Desc
2018-10-01    Description 1
              Description 2
              Description 3
              Description 4
2018-10-02    Description 1
              Description 2
              Description 3

我尝试过的是这个

var seen = {};

$('#TableId tbody tr').each(function () {
    var txt = $("td:first-child", $(this)).text();

    if (seen[txt]) $(this).text("");
    else seen[txt] = true;
});

但是，我得到以下输出：

Date         Desc
2018-10-01   Description 1
2018-10-02   Description 1

编辑

这里是Codepen

更新

根据Adam的回答，现在可以很好地工作了，但问题是我的应用程序更改了Desc列的排序顺序，这是我的真实数据

的示例

我做错了什么？我该如何解决呢？

Answer 1

添加 fnDrawCallback 应该可以解决您的排序问题：

$('#TableId').DataTable({
  "fnDrawCallback": updateTable
});

function updateTable(){
  var x = '';
  $('#TableId tbody tr').each(function () {
    var txt = $("td:first-child", $(this)).text();
    if(txt == x) {
      $("td:first-child", $(this)).css('visibility', 'hidden');        
    }
    else {
      $("td:first-child", $(this)).css('visibility', 'visible');
      x = txt;
    }
  });
}

CodePen：https://codepen.io/anon/pen/XxaBby

Answer 2

如果您使用的数据表比我想的要多，您将需要THIS 否则，此代码将起作用。

签出this：

<html>
  <head></head>
  <body>
    <table class="table">
      <thead>
        <tr>
          <th>Date</th>
          <th>Desc</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>2018-10-01</td>
          <td>Description 1</td>
        </tr>
        <tr>
          <td>2018-10-01</td>
          <td>Description 2</td>
        </tr>
        <tr>
          <td>2018-10-01</td>
          <td>Description 3</td>
        </tr>
        <tr>
          <td>2018-10-01</td>
          <td>Description 4</td>
        </tr>
        <tr>
          <td>2018-10-02</td>
          <td>Description 5</td>
        </tr>
        <tr>
          <td>2018-10-02</td>
          <td>Description 6</td>
        </tr>
        <tr>
          <td>2018-10-02</td>
          <td>Description 7</td>
        </tr>
        <tr>
          <td>2018-10-02</td>
          <td>Description 8</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

JS代码：

var dates = {};
var i = 1;
$('.table tbody tr td:nth-child(1)').each(function(){
  var innerText = $(this).text();
  $(this).text('');
  dates[innerText] = i;
  i++;
})

var j = 1;
for (var prop in dates) {
  selector = $('.table tbody tr:nth-child('+j+') td:nth-child(1)');
  selector.attr('rowspan',dates.prop);
  selector.text(prop);
  j = dates[prop];
}

Answer 3

您正在清除tr，这将删除该行中的所有单元格。而是只清除所需列的td。

var seen = {};

$('#TableId tbody tr').each(function () {
    var $cell = $("td:first-child", $(this)); 
    if (seen[$cell.text()]) $cell.text("");
    else seen[$cell.text()] = true;
});

删除列中的重复值

3 个答案: