Question

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

我试图使代码遍历表，使用if语句检查行中的单元格值，然后使用（this）函数或（'#tdID'）格式进行检查。

当我不使用（this）时，我无法检查第一个行以下的任何单元格值，但据我所知，（this）自启动以来仅指#DataEntryStatus id第一行中的功能。基本上，我需要类似（this）的东西，但需要使用＃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>

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

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>

Answer 2

您可以尝试一下，在这里我得到each row，然后得到该行的each cell/column，然后检查是否为空。...

您可以用if中的任何值代替empty ...

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

<table id='myTable' border>
  <tr>
    <td>
      Row1 Col1
    </td>
    <td>
      Row1 Col2
    </td>
   </tr>
   <tr>
    <td>
      Row2 Col1
    </td>
    <td></td>
   </tr>
   <tr>
    <td></td>
    <td>
      Row3 Col2
    </td>
   </tr>
 </table>
 
 <script>
 $("#myTable tr").each(function(rowNum,row){
  for(var i = 0; i < row.children.length; i++) {
  
      if(row.children[i].innerHTML == ""){
        row.children[i].innerHTML = "Entry Missing"; //Set text of current cell as 'Entry Missing'
      }
      
  }
});
 </script>

如何检查是否填充了多行单元格

2 个答案: