Question

我有两个相似的表，这些表的单元格包含值（1-99或空）。在每一行中，我需要查看两个单元格的值是否相等。如果是这样，复选标记将显示在另一个单元格中。第一个值（数字）来自对另一个表中的某些值进行计数，第二个值（匹配项）经过硬编码。

下面的代码适用于第一个表：找到匹配项，并且选中标记正确显示。但是，对于第二个表，它不起作用：由于某种原因，代码将第一个表（numberA）的值与第二个表（matchB）的匹配值进行比较，然后在checkitB中显示选中标记。

第一张桌子：

<table class="myNumbers_tableA">
    <tr class="myNumbers_trA">
        <td class="numberA" id='numberA_pdc'></td>
        <td>This happened <span class="matchA" id="matchA_pdc">3</span> times</td>
        <td class="checkitA" id="checkitA_pdc"></td>
    </tr>
    <tr class="myNumbers_trA">
        <td class="numberA" id='numberA_boz'></td>
        <td>This happened <span class="matchA" id="matchA_boz">17</span> times</td>
        <td class="checkitA" id="checkitA_boz"></td>
    </tr>

etc.

</table>

第二张表：

<table class="myNumbers_tableB">
    <tr class="myNumbers_trB">
        <td class="numberB" id='numberB_zwp'></td>
        <td>This happened <span class="matchB" id="matchB_zwp">58</span> times</td>
        <td class="checkitB" id="checkitB_zwp"></td>
    </tr>
    <tr class="myNumbers_trB">
        <td class="numberB" id='numberB_ipc'></td>
        <td>This happened <span class="matchB" id="matchB_ipc">2</span> times</td>
        <td class="checkitB" id="checkitB_ipc"></td>
    </tr>

etc.

</table>

第一个表格的代码：

$('.checkitA').html(function() {
    var find_numberA = $(this).closest('tr.myNumbers_trA').find('.numberA').text();
    var find_matchA = $(this).closest('tr.myNumbers_trA').find('.matchA').text();
    return parseInt(find_numberA, 10) == parseInt(find_matchA, 10) ? '&#10004;' : '';
});

第二个表的代码：

$('.checkitB').html(function() {
    var find_numberB = $(this).closest('tr.myNumbers_trB').find('.numberB').text();
    var find_matchB = $(this).closest('tr.myNumbers_trB').find('.matchB').text();
    return parseInt(find_numberB, 10) == parseInt(find_matchB, 10) ? '&#10004;' : '';
});

我尝试了各种代码，但似乎没有一个可以满足我的要求。我认为这与closet（）有关，但我不知道应该用什么代替。请指教！谢谢！

另一个仅适用于第一个表的示例：

$('.checkitA').html(function() {
    var row = $(this).closest('tr.myNumbers_trA');
    return parseInt(row.find('.numberA').text(), 10) == parseInt(row.find('.matchA').text(), 10) ? '&#10004;' : '';
});

编辑：这两种方法均无法正常工作，因此，如果表B中存在匹配项，则复选标记也会显示在表A中。因此，问题在于比较不限于父级

EDIT2 ：这是我所期望的，但是在两个表中，第一行和第三行都得到一个选中标记：

example table

Answer 1

下面是解决方法的摘要。我所做的是检查span.checkitA中的数字是否包含在同一行的第一个单元格的字符串中。如果发生发生，我把检查放在同一行的第三个单元格上。对“ B”表相同。

为此，我使用.parent（）和.children（）知道我要检查的行并获取计数器，然后使用.indexOf（）来检查它是否是第一个文本的子字符串单元格。

$('.checkitA, .checkitB').html(function() {

    var row = $(this).parent();
    var text_cell1 = row.children().eq(0).text();
    var text_cell2 = row.children().eq(1).find('span').text();
    
    if(text_cell1.indexOf(text_cell2) !== -1){
       $(this).text('&#10004;')
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="myNumbers_tableA">
    <tr class="myNumbers_trA">
        <td class="numberA" id='numberA_pdc'> Score of 3</td>
        <td>This happened <span class="matchA" id="matchA_pdc">3</span> times</td>
        <td class="checkitA" id="checkitA_pdc"></td>
    </tr>
    <tr class="myNumbers_trA">
        <td class="numberA" id='numberA_boz'>score of 10</td>
        <td>This happened <span class="matchA" id="matchA_boz">17</span> times</td>
        <td class="checkitA" id="checkitA_boz"></td>
    </tr>
</table>

<br><br>
<table class="myNumbers_tableB">
    <tr class="myNumbers_trB">
        <td class="numberB" id='numberB_zwp'>score of 58</td>
        <td>This happened <span class="matchB" id="matchB_zwp">28</span> times</td>
        <td class="checkitB" id="checkitB_zwp"></td>
    </tr>
    <tr class="myNumbers_trB">
        <td class="numberB" id='numberB_ipc'>score of 1</td>
        <td>This happened <span class="matchB" id="matchB_ipc">1</span> times</td>
        <td class="checkitB" id="checkitB_ipc"></td>
    </tr>
</table>

不幸的是，此代码匹配字符串，因此在以下情况下脚本失败

<tr class="myNumbers_trA">
   <td class="numberA" id='numberA_pdc'> Score of 34</td>
   <td>This happened <span class="matchA" id="matchA_pdc">3</span> times</td>
   <td class="checkitA" id="checkitA_pdc"></td>
</tr>

因为3是34的子字符串。相反，如果您可以对两个数字进行跨距并进行一些编辑，则代码会正常工作。

要与我的解决方案一起正常工作，您的HTML代码（如果可能）应变成这样

<tr class="myNumbers_trA">
       <td class="numberA" id='numberA_pdc'> Score of <span>34</span></td>
       <td>This happened <span class="matchA" id="matchA_pdc">3</span> times</td>
       <td class="checkitA" id="checkitA_pdc"></td>
    </tr>

anf JS成为

$('.checkitA, .checkitB').html(function() {

    var row = $(this).parent();
    var text_cell1 = row.children().eq(0).find('span').text();
    var text_cell2 = row.children().eq(1).find('span').text();

    if(text_cell1 == text_cell2){
       $(this).text('&#10004;')
    }
});

通过这种方式，代码将匹配所有数字而不会出错。

查找和比较表中每一行的单元格值

1 个答案: