突出显示具有不同值的表列 td

Question

我有一个HTML代码中的表格 <table>，用于展示日志。我想遍历整个表格，在一行中高亮显示任何相邻的具有不同值的单元格<tr>。

我试图比较特定行中任意两个<td>的值。我已经做到了某些事情，但只是在两列上。

以下是表格结构的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');  
    }
});

我希望能得到一些建议，如何处理它？

- alphy

---

你需要在哪里进行操作呢？每个单元格？整列？你可以将背景应用于行或该行的每个单元格。 - Adriano Repetti

是的，我想在特定行的每个单元格上执行此操作。 - alphy

目前，它只能在两列上工作，因为只有一行具有“data-in-table”类。 - feddus

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>

- melc

Answer 2

这是我的解决方案：

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

- feddus

Answer 3

好的，你想要突出特定字段 <td>，现在我理解了。

更好的解决方案是在创建表格时进行操作。

我确信这种方法在性能上更好，我在JsPerf这里有测试结果

所以请按照以下方式创建你的表格:

重要提示: 当然，你将拥有动态的值，所以将它放在<td>标签内的 value 变量中。

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

- Paulo Roberto Rosa