突出显示html表特定列的重复行[关闭]

Question

我在我的表上使用 DataTable，我想突出显示两到三列中的重复行。 与我想做的最相关的是这个答案Here

这是我从其中一个答案中尝试过的。但是在这个解决方案中，因为 dataTable 在表格上应用了分页，所以它只考虑第一页上的数据。如果有人有更方便的解决方案，请回答。

    $(function() {
        var duplicate = false;
        $("table tr").each(function() {
            var $current = $(this).children();
            var $next = $(this).next().children();
            if($current.text() === $next.text() && !duplicate) {
                duplicate = true;
                $current.addClass("top-border").addClass("background");
            } else if($current.text() === $next.text() && duplicate) { 
                $current.addClass("background");
            } else if($current.text() !== $next.text() && duplicate) {
                $current.addClass("bottom-border").addClass("background");
                duplicate = false;
            }
        });
    });

.top-border {
        border-top: 1px solid #333;
    }

    .bottom-border {
        border-bottom: 1px solid #333;
    }

    .background {
        background-color: #E6F2D3;
    }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="table-responsive">
<table id="table1" class="display">
  <thead>
    <tr>
      <th>Sr No.</th>  
      <th>Timestamp</th>
      <th>Email Id</th>
      <th>Whatsapp No</th>
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
  <tr>
  <td class="sorting_1">1</td>
  <td>2020-10-29 20:53:23</td>
  <td>laaa@gmail.com</td>
  <td>+916302930342</td>
  <td>Lunavath Kapil</td>
  </tr>
  <tr>
  <td class="sorting_1">2</td>
  <td>2020-10-29 11:49:02</td>
  <td>laaa@gmail.com</td>
  <td>+916302930342</td>
  <td>Lunavath Kapil</td>
  </tr>
  <tr>
  <td class="sorting_1">3</td>
  <td>2020-10-27 00:47:35</td>
  <td>hema@gmail.com</td>
  <td>+917227860350</td>
  <td>Hemali Bhadeshiya</td>
  </tr>
  <tr>
  <td class="sorting_1">10</td>
  <td>2020-10-26 13:52:39</td>
  <td>Ka@gmail.com</td>
  <td>+919780818089</td>
  <td>Veerpal kaur</td>
  </tr>
  </tbody>
</table>
</div>

Answer 1

首先，您的问题与 DataTables 或数据如何加载无关。 您正在比较完整的行，并且您提供的示例数据没有重复的行。

如果您想对照另一列检查一列中的值，您需要遍历 td 元素进行比较。

the question you linked 中标记的答案是一个有效的解决方案，如果您调整代码以适合您的数据。因此，例如，您在 Email Id 列中有一个重复值，所以...将比较更改为该列：

$(function() {
    var duplicate = false;
    $("table tr").each(function() {
        var $current = $(this).children(":nth-child(3)");
        var $next = $(this).next().children(":nth-child(3)");
        console.log($current.text());
        console.log($next.text());
        if($current.text() === $next.text() && !duplicate) {
            duplicate = true;
            $current.parent().children().addClass("top-border").addClass("background");
        } else if($current.text() === $next.text() && duplicate) { 
            $current.parent().children().addClass("background");
        } else if($current.text() !== $next.text() && duplicate) {
            $current.parent().children().addClass("bottom-border").addClass("background");
            duplicate = false;
        }
    });
});

小提琴演示here