javascript - 使用 jquery 和相对引用按单元格内容搜索表格

Question

有这样的表

<table>
<thead> ... </thead>
<tbody>
  <tr class="TableOdd">
    <td class="TableCol0"> 1 </td>
    <td class="TableCol1"> x </td>
    <td class="TableCol2"> x </td>
    <td class="TableCol3"> # </td>
  </tr>
  <tr class="TableEven">
    <td>....</td>
  </tr>
</tbody>

例如每个单元格都有自己的类，指示它的列号 TableCol0,1,2..N

在每一行中，需要比较第1列和第2列单元格的内容，并将结果写入第3列。

管理以下脚本，

$(document).ready(function() {
var toterr = 0;
$('tbody tr.TableEven,tbody tr.TableOdd').each(function() {
    var wanted = $(this).find('.TableCol1' ).html();
    var actual = $(this).find('.TableCol2' ).html();
//console.log('wanted='+wanted+'=actual='+actual+'=');
    if ( wanted == actual ) {
        $(this).find('.TableCol3').text('ok');
    } else {
        $(this).find('.TableCol3').text('ERROR');
        toterr++;
    }
});
$('#totalerror').text(toterr);   
});

这可能不是最佳的，但是有效。

现在有一个有点不同的场景:需要比较具有指定内容( :CMP: )的单元格之前的两个单元格，例如:

<table>
<thead> ... </thead>
<tbody>
  <tr class="TableOdd">
    <td class="TableCol0"> x </td>
    <td class="TableCol1"> x </td>
    <td class="TableCol2"> :CMP: </td>
    <td class="TableCol3"> etc </td>
  </tr>
  <tr class="TableEven">
    <td class="TableCol0"> N </td>
    <td class="TableCol1"> x </td>
    <td class="TableCol2"> y </td>
    <td class="TableCol3"> :CMP: </td>
  </tr>
</tbody>

对于每一行，需要比较 :CMP: 之前的单元格，并替换 :CMP:与结果。例如

• 第一行需要比较x和x并写 ok在细胞中.TableCol2
• 第二行需要比较x和y并在单元格 .TableCol3 中写入 ERROR

我不知道如何修改上面的脚本。

Answer 1

可以轻松获取包含':CMP:'的单元格的索引，并使用该索引引用之前的单元格。或者使用 prev() 等遍历，或者在找到索引后使用 eq()。

$('tbody tr').each(function () {
    var $cells = $(this).children(),
        $cmp = $cells.filter(':contains(":CMP:")'),
        cmpIndex = $cells.index($cmp);        
    // array of values of previous cells
    var values = $.map($cells.slice(cmpIndex - 2, cmpIndex), function (el) {
        return $.trim($(el).text());
    });
   // make sure we have 2 cells with values and compare
    var cmpText = values.length === 2 && values[0] === values[1] ? 'OK' : 'ERROR';
    $cmp.text(cmpText);
});

DEMO