Mam kłody HTML {X0}}.

Próbuję porównać dowolne dwie wartości w <td> w określonym wierszu. Udało mi się coś zrobić, ale tylko na 2 kolumnach.

Poniżej znajduje się kod próbny HTML struktury tabeli:

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

i mój kod 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');  
    }
});

Chciałbym sugestie, jak sobie z tym poradzić?

6
alphy 3 grudzień 2013, 15:24

2 odpowiedzi

Najlepsza odpowiedź

Proponowałbym coś takiego jak następujące, aby być niezależnym od liczby kolumn.

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>
3
melc 3 grudzień 2013, 11:44

Oto moje rozwiązanie:

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

Fiddle: http://jsfiddle.net/3cdyh/

0
feddus 3 grudzień 2013, 11:35