CODEWITHSUNDEEP
jquery
Khaynes
Khaynes

Reputation: 1986

Highlight duplicate row observations with different colour by each column

I have a table (it's a lot longer and wider) and I want to be able to highlight duplicate values within each column. At the moment I can do this over 1 column but not multiple. 

$(function() {
  var tableRows = $("#sortable tbody tr"); //find all the rows
  var colors = ["red", "blue", "green", "yellow", "#f5b"];
  var rowValues = {};
  tableRows.each(function() {
    var rowValue = $(this).find(".content").html();
    if (!rowValues[rowValue]) {
      var rowComposite = new Object();
      rowComposite.count = 1;
      rowComposite.row = this;
      rowComposite.color = colors.shift();
      rowValues[rowValue] = rowComposite;
    } else {
      var rowComposite = rowValues[rowValue];
      rowComposite.count++;
      $(this).css('backgroundColor', rowComposite.color);
      $(rowComposite.row).css('backgroundColor', rowComposite.color);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sortable">
  <tbody>
    <tr>
      <td class="content">A</td>
      <td class="content">F</td>
    </tr>
    <tr>
      <td class="content">B</td>
      <td class="content">F</td>
    </tr>
    <tr>
      <td class="content">A</td>
      <td class="content">B</td>
    </tr>
    <tr>
      <td class="content">C</td>
      <td class="content">D</td>
    </tr>
    <tr>
      <td class="content">C</td>
      <td class="content">F</td>
    </tr>
  </tbody>
</table>

Upvotes: 0

Views: 83

Answers (1)

Kalimah
Kalimah

Reputation: 11437

You can use tr td:nth-child selector to chose the "column" that you want. See this example:

$(function() {
  var tableRows = $("tr td:nth-child(1)"); //find all the rows
  var colors = ["red", "blue", "green", "yellow", "#f5b"];
  var rowValues = {};
  tableRows.each(function() {
    var rowValue = $(this).text();

    if (!rowValues[rowValue]) {
      var rowComposite = new Object();
      rowComposite.count = 1;
      rowComposite.row = this;
      rowComposite.color = colors.shift();
      rowValues[rowValue] = rowComposite;
    } else {
      var rowComposite = rowValues[rowValue];
      rowComposite.count++;
      $(this).css('backgroundColor', rowComposite.color);
      $(rowComposite.row).css('backgroundColor', rowComposite.color);
    }
  });

  // Second column
  var tableRows = $("tr td:nth-child(2)"); //find all the rows
  // var colors = ["red", "blue", "green", "yellow", "#f5b"];
  var rowValues = {};
  tableRows.each(function() {
    var rowValue = $(this).text();

    if (!rowValues[rowValue]) {
      var rowComposite = new Object();
      rowComposite.count = 1;
      rowComposite.row = this;
      rowComposite.color = colors.shift();
      rowValues[rowValue] = rowComposite;
    } else {
      var rowComposite = rowValues[rowValue];
      rowComposite.count++;
      $(this).css('backgroundColor', rowComposite.color);
      $(rowComposite.row).css('backgroundColor', rowComposite.color);
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="sortable">
  <tbody>
    <tr>
      <td class="content">A</td>
      <td class="content">F</td>
    </tr>
    <tr>
      <td class="content">B</td>
      <td class="content">F</td>
    </tr>
    <tr>
      <td class="content">A</td>
      <td class="content">B</td>
    </tr>
    <tr>
      <td class="content">C</td>
      <td class="content">D</td>
    </tr>
    <tr>
      <td class="content">C</td>
      <td class="content">F</td>
    </tr>
  </tbody>
</table>

Upvotes: 1

Related Questions