javascript - JS循环遍历表格并根据条件在列中打印文本

Question

我有一个简单的表格，我需要根据隐藏列的条件在特定列中打印文本。有多个行作为具有相同 TD ID 的记录。我需要做的是，遍历表的每一行并检查 status1 (gv-field-15-139), status2 (gv-field-15-140 ) 和 status3 (gv-field-15-141)。如果此状态之一 (gv-field-15-150) 为“已完成”，我想在“状态”列中打印“已完成”。可能吗？

 $(document).ready(function(){
     if(($('td#gv-field-15-139').text() == 'Completed') || ($('td#gv-field-15-
     140').text() == 'Completed') || ($('td#gv-field-15-141').text() == 'Completed') ) {
    $("td#gv-field-15-150").text('Completed');
    }

    <table>
      <tr>
       <th>Student Name</th>
       <th>Nationality</th>
       <th>Status</th>
       <th>Status1</th>
       <th>Status2</th>
       <th>Status3</th>
      </tr>
      <tr>
       <td id="gv-field-15-1">Student A</td>
       <td id="gv-field-15-90">India</td>
       <td id="gv-field-15-150">&nbsp;</td>
       <td id="gv-field-15-139">Completed</td>
       <td id="gv-field-15-140">Pending</td>
       <td id="gv-field-15-141">Pending</td>
      </tr>
      <tr>
       <td id="gv-field-15-1">Student B</td>
       <td id="gv-field-15-90">China</td>
       <td id="gv-field-15-150">&nbsp;</td>
       <td id="gv-field-15-139">Completed</td>
       <td id="gv-field-15-140">Pending</td>
       <td id="gv-field-15-141">Pending</td>
      </tr>
    </table>

这只适用于 1 行，当它变成 2 行或更多时它不起作用。能否请您告诉我实现此目标的方法。

Answer 1

循环你的 tr 除了第一个有 th 的 tr 并检查 td。虽然您可以使用 id 来解决您的问题，但建议使用类而不是 id。

$(document).ready(function() {
    var trs = $('tr').not(':eq(0)');
    $.each(trs, function() {
        var $this = $(this);
        if (($this.find('>td#gv-field-15-139').text() == 'Completed') || ($this.find('>td#gv-field-15-140').text() == 'Completed') || ($this.find('>td#gv-field-15-141').text() == 'Completed')) {
            $this.find(">td#gv-field-15-150").text('Completed');
        }
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
   <th>Student Name</th>
   <th>Nationality</th>
   <th>Status</th>
   <th>Status1</th>
   <th>Status2</th>
   <th>Status3</th>
  </tr>
  <tr>
   <td id="gv-field-15-1">Student A</td>
   <td id="gv-field-15-90">India</td>
   <td id="gv-field-15-150">&nbsp;</td>
   <td id="gv-field-15-139">Completed</td>
   <td id="gv-field-15-140">Pending</td>
   <td id="gv-field-15-141">Pending</td>
  </tr>
  <tr>
   <td id="gv-field-15-1">Student B</td>
   <td id="gv-field-15-90">China</td>
   <td id="gv-field-15-150">&nbsp;</td>
   <td id="gv-field-15-139">Completed</td>
   <td id="gv-field-15-140">Pending</td>
   <td id="gv-field-15-141">Pending</td>
  </tr>
  <tr>
   <td id="gv-field-15-1">Student B</td>
   <td id="gv-field-15-90">China</td>
   <td id="gv-field-15-150">&nbsp;</td>
   <td id="gv-field-15-139">Pending</td>
   <td id="gv-field-15-140">Pending</td>
   <td id="gv-field-15-141">Pending</td>
  </tr>
</table>