javascript - 如何检查多行单元格是否已填充

Question

我需要检查表格行中的所有其他单元格，以便有一个单元格(每一行都有一个单元格，而不是一个单元格)自动显示“条目丢失”或“完整”。目前，我只能使其在第一行正常工作，因为我只能让它检查第一行中的单元格。

我尝试让代码迭代表，使用 if 语句检查行中单元格的值，然后使用 (this) 函数或使用 ('#tdID') 格式。

当我不使用(this)时，我无法检查第一行下方的任何单元格值，但据我所知，(this)自启动以来仅引用#DataEntryStatus id第一行的函数。基本上，我需要一些像这样工作的东西，但具有 #Tool、#CutRef 和更多 td ID。

$('#table_id #DataEntryStatus').each(function(){

    if($('#Tool').text() =="")$(this).text("Entry missing");
    else if($('#CutRef').text() =="")$(this).text("Entry missing");
    else($(this).text("Complete"));


    if($(this).text().toLowerCase() =="entry missing")$(this).css('background-color','#fcc');
    if($(this).text().toLowerCase() =="complete")$(this).css('background-color','#af0');
});

这是 id 的来源表

<table class="table" id="table_id">
        <tr>
            <th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
            <th style="vertical-align:bottom;">Data Entry Status</th>
            <th style="vertical-align:bottom;">Tool</th>
            <th style="vertical-align:bottom;">Cut Ref</th>
            <th style="vertical-align:bottom;">Date</th>
            <th style="vertical-align:bottom;">Coupon</th>
            <th style="vertical-align:bottom;">Row</th>
            <th style="vertical-align:bottom;">Axial</th>
            <th style="vertical-align:bottom;">Ox Pocket</th>
            <th style="vertical-align:bottom;">SM Pocket</th>
            <th style="vertical-align:bottom;">Tray #</th>
            <th style="vertical-align:bottom;">Angle</th>
            <th style="vertical-align:bottom;">Probe</th>

        </tr>


    <tbody id="myTable">
    {% for item in items %}
    <tr>
        <td>
            <a href="{% url 'edit_newcuts' item.pk %}" class="btn btn-primary btn-sm" role="button">Edit</a>
            <a href="{% url 'delete_newcuts' item.pk %}" class="btn btn-danger btn-sm" role="button">! X !</a>
        </td>
        <td id="DataEntryStatus"><div>{{ item.DataEntryStatus }}</div></td>
        <td id="Tool"><div>{{ item.Tool }}</div></td>
        <td id="CutRef"><div>{{ item.CutRef }}</div></td>
        <td id="CutDate"><div>{{ item.CutDate }}</div></td>
        <td id="Coupon"><div>{{ item.Coupon }}</div></td>
        <td id="Row"><div>{{ item.Row }}</div></td>
        <td id="Axial"><div>{{ item.Axial }}</div></td>
        <td id="OxPocket"><div>{{ item.OxPocket }}</div></td>
        <td id="SmPocket"><div>{{ item.SmPocket }}</div></td>
        <td id="TrayNum"><div>{{ item.TrayNum }}</div></td>
        <td id="Angle"><div>{{ item.Angle }}</div></td>
        <td id="Probe"><div>{{ item.Probe }}</div></td>
    </tr>
    {% endfor %}
    </tbody>
</table>

我希望它单独检查每一行，并确定哪些行填充了值，哪些行没有，但目前它只检查第一行的单元格，并为后面的行中的每个状态单元格打印相同的输出。

Answer 1

您可以直接迭代表中的每个tr，然后迭代每个单元格。引用:gt pseudo selector

// Check each row in table
$('#table_id tbody tr').each(function() {
  $row = $(this)
  $status = $row.find('#DataEntryStatus');
  // Iterate every cell, but skip the first two in each row
  // (action and status cell). Be sure to update this value if you change
  // the table structure
  $row.find('td:gt(1) div').each(function() {
    $status.text("Complete").css('background-color', '#af0');
    if ($(this).text() == "") {
      $status.text("Entry missing").css('background-color', '#fcc');
      // The row is invalid, break from the each()
      return false;
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" id="table_id">
  <tr>
    <th style="color:#ddd">fffffffffffffff<br>f<br>f<br>f</th>
    <th style="vertical-align:bottom;">Data Entry Status</th>
    <th style="vertical-align:bottom;">Tool</th>
    <th style="vertical-align:bottom;">Cut Ref</th>
    <!-- Simplified for convenience -->
  </tr>
  <tbody id="myTable">
    <tr>
      <td>
        <a href="{% url 'edit_newcuts' item.pk %}" class="btn btn-primary btn-sm" role="button">Edit</a>
        <a href="{% url 'delete_newcuts' item.pk %}" class="btn btn-danger btn-sm" role="button">! X !</a>
      </td>
      <td id="DataEntryStatus">
        <div>DataEntryStatus</div>
      </td>
      <td id="Tool">
        <div></div>
      </td>
      <td id="CutRef">
        <div>CutRef 1</div>
      </td>
      <!-- Simplified for convenience -->
    </tr>
    <tr>
      <td>
        <a href="{% url 'edit_newcuts' item.pk %}" class="btn btn-primary btn-sm" role="button">Edit</a>
        <a href="{% url 'delete_newcuts' item.pk %}" class="btn btn-danger btn-sm" role="button">! X !</a>
      </td>
      <td id="DataEntryStatus">
        <div>DataEntryStatus 2</div>
      </td>
      <td id="Tool">
        <div>Tool 2</div>
      </td>
      <td id="CutRef">
        <div>CutRef 2</div>
      </td>
      <!-- Simplified for convenience -->
    </tr>
  </tbody>
</table>