>

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

수정

다음은 코드 펜

입니다.

업데이트

아담 대답에 따르면 이제는 잘 작동하지만 문제는 내 응용 프로그램에서 Desc 열의 정렬 순서를 변경한다는 것입니다. 여기에는 실제 데이터

내가 뭘 잘못하고 있니? 어떻게 해결할 수 있습니까?

  • 답변 # 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

  • 답변 # 2

    데이터 테이블을 사용하는 경우 생각보다 그렇지 않으면이 코드가 작동합니다.

    체크 아웃 :

    <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];
    }
    
    

  • 답변 # 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;
    });
    
    

관련 자료

  • 이전 android - 어떻게 직렬화에 GSON 및 개조를 얻을 문자열로 JSON 응답에서 배열을지도로?
  • 다음 sysadmin이 SQL Server Express에 액세스 할 수있는 Windows 사용자 및 그룹을 찾으려면 어떻게합니까?