Highlighting table column td with different values

html-table, javascript, jquery

Solution

I would suggest something like the following, in order to be independent of the number of columns.

http://jsfiddle.net/hA5G8/

js

$("#coa_history_data tbody tr.data-in-table").each(function () {

    $(this).find('td').each(function (index) {
        var currentCell = $(this);
        var nextCell = $(this).next('td').length > 0 ? $(this).next('td') : null;
        if (index%2==0&&nextCell && currentCell.text() !== nextCell.text()) {
            currentCell.css('backgroundColor', 'yellow');
            nextCell.css('backgroundColor', 'yellow');
        }
    });
});

html

<table id="coa_history_data">
    <tr class="data-in-table">
        <th>old Name</th>
        <th>New Name</th>
        <th>Old Phone</th>
        <th>New Phone</th>
        <th>Old Age</th>
        <th>New Age</th>
    </tr>
    <tbody>
        <tr class="data-in-table">
            <td>Alphy</td>
            <td>Alphy</td>
            <td>015</td>//should be highlited
            <td>016</td>//should be highlited
            <td>23</td>//should be highlited
            <td>24</td>//should be highlited</tr>
        <tr class="data-in-table">
            <td>Tom</td>
            <td>Tom</td>
            <td>12</td>
            <td>12</td>
            <td>65</td>//should be highlited
            <td>30</td>//should be highlited</tr>
        <tr class="data-in-table">
            <td>will</td>
            <td>will</td>
            <td>45</td>
            <td>45</td>
            <td>20</td>
            <td>20</td>
        </tr>
    </tbody>
</table>

Problem

I have a html `<table>` showing logs, I would like to loop over the whole table highlighting any adjacent cells `<tr>` in a row with different values. I am trying to compare any two values in a `<td>` in a particular row. I have managed to do something but only on 2 columns. Below is a html sample code of the table structure: ``` <table id="coa_history_data"> <tr> <th>old Name</th> <th>New Name</th> <th>Old Phone</th> <th>New Phone</th> <th>Old Age</th> <th>New Age</th> </tr> <tbody> <tr class="data-in-table"> <td>Alphy</td> <td>Alphy</td> <td>015</td> //should be highlited <td>016</td> //should be highlited <td>23</td> //should be highlited <td>24</td> //should be highlited </tr> <tr> <td>Tom</td> <td>Tom</td> <td>12</td> <td>12</td> <td>65</td> //should be highlited <td>30</td> //should be highlited </tr> <tr> <td>will</td> <td>will</td> <td>45</td> <td>45</td> <td>20</td> <td>20</td> </tr> </tbody> </table> ``` And my JavaScript Code: ``` $("#coa_history_data tbody tr.data-in-table").each(function() { var $firstCell = $('td:eq(3)', this); var $thirdCell = $('td:eq(4)', this); if($firstCell.text() === $thirdCell.text()){ }else{ $firstCell.css('backgroundColor','yellow'); $thirdCell.css('backgroundColor','yellow'); } }); ``` I would like some suggestions, how to handle it?

Original source