Yunus Aslam
Yunus Aslam

Reputation: 2466

Jquery or PHP Highlight a table row based on the repeated values

I have a table which displays data fetched from the database. I have done this in PHP say $data_array(); What I want is to find the record with same Email address and highlight those rows with Red. Meaning, if an email address is repeated in the table twice or thrice, all the 3 rows will get Red highlighted.

I have done this way:

$exist = array();
foreach($data_array as $da){
    if(in_array($da['Email'], $exist)){
        $row_color = "#f00";   //  Red
    }else{
        $row_color = "#fff";   // White
    }
    echo "<tr style='color:".$row_color.";'>";
        echo "<td>".$da['Email']."</td>";
    echo "</tr>";
    $exist[] = $da['Email'];
}

The above works and displays the second and the third row highlighted but not the first one. Obviously my code has nothing which will highlight the first record which has repeated value.

How can I do this? Can be done in PHP or Jquery also. Any help??

Upvotes: 2

Views: 540

Answers (2)

david
david

Reputation: 633

You can separate the duplicate-check from the rendering of the HTML and do it beforehand, so that you know whether an email is duplicated when you are rendering your HTML.

Example

<?php
$data_array = [
  [ 'Email' => '[email protected]' ],
  [ 'Email' => '[email protected]' ],
  [ 'Email' => '[email protected]' ],
  [ 'Email' => '[email protected]' ],
];
$email_count = [];

// Count emails.
foreach($data_array as $entry) {
    $email = $entry['Email'];

    if (isset($email_count[$email])) {
            $email_count[$email]++;
    } else {
            $email_count[$email] = 1;
    }
}

// Render table.
foreach($data_array as $entry) {
    if($email_count[$entry['Email']] > 1){
        $row_color = "#f00";   //  Red
    }else{
        $row_color = "#fff";   // White
    }
    echo "<tr style='color:".$row_color.";'>";
    echo "<td>".$entry['Email']."</td>";
    echo "</tr>" . PHP_EOL;
}

Result

<tr style='color:#f00;'><td>[email protected]</td></tr>
<tr style='color:#fff;'><td>[email protected]</td></tr>
<tr style='color:#f00;'><td>[email protected]</td></tr>
<tr style='color:#f00;'><td>[email protected]</td></tr>

Upvotes: 0

Eddie
Eddie

Reputation: 26844

in jQuery, you can use filter() and use includes() to check if <td>'s text is in the array.

var emails = ['[email protected]', '[email protected]'];

$('table td').filter(function() {
  return emails.includes($(this).text().trim());
}).css('backgroundColor', 'red');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <th>Company</th>
  </tr>
  <tr>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>[email protected]</td>
  </tr>
  <tr>
    <td>[email protected]</td>
  </tr>
</table>

Upvotes: 2

Related Questions