如何根据匹配的 td 内容附加文本

Question

我有这张表，我想在其中检查 td 中的匹配内容。如果匹配，则必须在另一个 td 中显示一个 HTML 字符。在下面的示例中，如果第一个和第三个 td 具有匹配的内容，则最后一个 td 应该包含一个复选标记：

<table>
 <tr>
  <td id="star_psd">3</td><td>&nbsp;stars where&nbsp;</td>
  <td id="need_psd">5</td><td>&nbsp;are needed</td>
  <td id="check_psd"></td>
 </tr>
 <tr>
  <td id="star_nto">2</td><td>&nbsp;stars where&nbsp;</td>
  <td id="need_nto">2</td><td>&nbsp;are needed</td>
  <td id="check_nto"></td>
 </tr>
 <tr>
  <td id="star_pmi">0</td><td>&nbsp;stars where&nbsp;</td>
  <td id="need_pmi">2</td><td>&nbsp;are needed</td>
  <td id="check_pmi"></td>
 </tr>
</table>

因此，只有 id 为 check_nto 的 td 应该包含复选标记。

在其他代码中，我尝试了以下代码：

  var match_psd = $("star_psd").text();
   if (match_psd == $("need_psd").text()) {
      $("#check_psd").append("✅");
   }

.. 但它不起作用；复选标记始终显示在所有复选标记 td 中。我在这里做错了什么？请指教！也欢迎提出另一种（更清洁）方式的建议。

Answer 1

首先请注意，您的选择器不正确，因为它们缺少用于匹配 id 属性的 # 前缀。

关于您的目标，实现此目标的最简单方法是将公共类放在所有相关的td 元素上。然后，您可以循环遍历每个“检查”单元格，以根据星号和行所需星号的比较来设置html()。试试这个：

$('.check').html(function() {
  var $row = $(this).closest('tr');
  return parseInt($row.find('.star').text(), 10) == parseInt($row.find('.need').text(), 10) ? '✅' : '';
});

td { padding: 0 3px; }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td class="star" id="star_psd">3</td>
    <td>stars where</td>
    <td class="need" id="need_psd">5</td>
    <td>are needed</td>
    <td class="check" id="check_psd"></td>
  </tr>
  <tr>
    <td class="star" id="star_nto">2</td>
    <td>stars where</td>
    <td class="need" id="need_nto">2</td>
    <td>are needed</td>
    <td class="check" id="check_nto"></td>
  </tr>
  <tr>
    <td class="star" id="star_pmi">0</td>
    <td>stars where</td>
    <td class="need" id="need_pmi">2</td>
    <td>are needed</td>
    <td class="check" id="check_pmi"></td>
  </tr>
  <tr>
    <td class="star" id="star_foo">100</td>
    <td>stars where</td>
    <td class="need" id="need_foo">100</td>
    <td>are needed</td>
    <td class="check" id="check_foo"></td>
  </tr>
</table>

请注意，我删除了您 HTML 中的   用法。如果需要，请使用 CSS 添加填充。

Answer 2

Rory 所做工作的另一个不那么密集且更具解释性的实现可能类似于以下内容：

<table>

  <tr>
    <td class="numberOfStars" id="star_psd">3</td><td>&nbsp;stars where&nbsp;</td>
    <td class="requiredStars" id="need_psd">5</td><td>&nbsp;are needed</td>
    <td class="theCheckmark" id="check_psd"></td>
  </tr>

  <tr>
    <td class="numberOfStars" id="star_nto">2</td><td>&nbsp;stars where&nbsp;</td>
    <td class="requiredStars" id="need_nto">2</td><td>&nbsp;are needed</td>
    <td class="theCheckmark" id="check_nto"></td>
  </tr>

  <tr>
    <td class="numberOfStars" id="star_pmi">0</td><td>&nbsp;stars where&nbsp;</td>
    <td class="requiredStars" id="need_pmi">2</td><td>&nbsp;are needed</td>
    <td class="theCheckmark" id="check_pmi"></td>
  </tr>

</table>

...然后...

var rowCounter = 0;

$('tr').each(function() {

   rowCounter += 1;
   var numOfStars = parseInt($(this).find('.numberOfStars').text());
   var reqStars = parseInt($(this).find('.requiredStars').text());
   var check = '✔';

   console.log('~~~~~~~~~~~~~ Row Number:'+rowCounter+' ~~~~~~~~~~~~~');
   console.log('Number of stars: ' +numOfStars);
   console.log('Required stars: ' +reqStars);

   if(numOfStars < reqStars) {
      console.log('Number of stars DOES NOT meet the number of required stars');
   } else {
     console.log('Number of stars meets the number of required stars');
     $(this).find('.theCheckmark').html(check);
   }

   console.log('~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~\n\n');

});

...对于每个 tr：

• 查找星数并将其存储在变量中
• 查找所需的星数并将其存储在另一个变量中
• 创建一个包含复选标记符号的变量
• 比较星数和所需星数

• 根据比较结果，显示相应的消息并将复选标记放入/省略复选标记容器

  （请注意 parseInt 将每个 td 的文本转换为整数，并且必须正确执行比较。否则您将比较文本字符，而不是数字）

Rory 的解决方案是正确的