Подсчет столбца таблицы td с разными значениями

Question

У меня есть html <table>, показывающий журналы, я хотел бы перебрать всю таблицу, выделив любые смежные ячейки <tr> в строке с разными значениями.

Я пытаюсь сравнить любые два значения в <td> в определенной строке. Мне удалось что-то сделать, но только на 2 столбца.

Ниже приведен пример кода HTML структуры таблицы:

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

И мой JavaScript код:

$("#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'); 
    } 
}); 

Я хотел бы некоторые предложения, как справиться с этим?

Answer 1

Я хотел бы предложить что-то вроде следующего, для того, чтобы быть независимой от числа столбцов.

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> 

Answer 2

Heres моего решения:

<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> 
     <td>016</td> 
     <td>23</td> 
     <td>24</td> 
    </tr> 
    <tr class="data-in-table"> 
     <td>Tom</td> 
     <td>Tom</td> 
     <td>12</td> 
     <td>12</td> 
     <td>65</td> 
     <td>30</td> 
    </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> 

JScript:

$("#coa_history_data tbody tr.data-in-table").each(function() { 
     var $firstCell = $('td:eq(2)', this); 
     var $secondCell = $('td:eq(3)', this); 
     var $thirdCell = $('td:eq(4)', this); 
     var $fourthCell = $('td:eq(5)', this); 
    if($firstCell.text() != $secondCell.text()){ 
     $firstCell.css('backgroundColor','yellow'); 
     $secondCell.css('backgroundColor','yellow'); 
    } 
    if($thirdCell.text() != $fourthCell.text()){ 
     $thirdCell.css('backgroundColor','orange'); 
     $fourthCell.css('backgroundColor','orange'); 
    } 
}); 

скрипка: http://jsfiddle.net/3CdyH/

Answer 3

Ok вы хотите, чтобы выделить определенные поля <td> теперь я понимаю.

Лучшее решение - это сделать это при создании таблицы.

меня в том, что этот метод является лучшей производительности, у меня есть тесты здесь вJsPerf

Так создать свой стол таким образом:

Важно: конечно, что вы будете иметь динамические значения, поэтому поставьте его на переменную значения внутри<td>.

var content = []; 
    for (var i=0; i < len; i++){ 
     if (i==0) //i dont know what is your condition to the tr be 'data-in-table' so change if needs 
     class = "data-in-table"; 
     content.push("<tr class='"+class+"'>   "+ 
        "<td>will</td>     "+ 
        "<td>will</td>     "+ 
        "<td>"+value+"</td>    "+ 
        "<td>"+value+"</td>    "+ 
        "<td class=hlight>"+value+"</td>"+ 
        "<td class=hlight>"+value+"</td>"+ 
        "</tr>"); 
    } 
    document.getElementById('your_table_wrapper').innerHTML = "<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>     "+ 
                   content.join('')+ 
                   "</tbody>     "+ 
                   "</table>; 

И использовать этот CSS:

.hlight { 
    background-color: yellow; 
}