Удалить повторяющиеся значения в столбце - PullRequest
Новая
       5

Удалить повторяющиеся значения в столбце

0 голосов
/ 13 октября 2018

У меня есть следующая таблица 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

ОБНОВЛЕНИЕ

Согласно Адаму, ответ теперь работает нормально, но проблема в том, что в моем приложении изменяется порядок сортировки столбца Desc, вот пример с моими реальными данными data table

Что я делаю не так?И как я могу это решить?

Ответы [ 3 ]

0 голосов
/ 13 октября 2018

Если вы используете таблицы данных, чем, я думаю, вам понадобится ЭТО В противном случае этот код будет работать.

Извлечение это : 

<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];
}
0 голосов
/ 13 октября 2018

Вы очищаете 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;
});
0 голосов
/ 13 октября 2018

Добавление 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...