jquery - 验证后更改 <td> 背景颜色

Question

我在表格中有一个表格。我想更改 <td>表单验证错误后的背景颜色。我设法通过在每个 <td> 上插入一个 if 条件来做到这一点样式属性。有没有捷径。

例如，可以使用 jquery。以下是我的代码风格:

<td style="<?php echo (!empty($msgError) && empty($purchase_mode)) ? 'background-color: rgba(244, 67, 54, 0.33);' : ''; ?> "> 
    <input type="checkbox" name="purchase_mode" value="DIRECT"/>Direct
</td>
<td style="<?php echo (!empty($msgError) && empty($purchase_category)) ? 'background-color: rgba(244, 67, 54, 0.33);' : ''; ?> ">
    <input type="checkbox" name="description" value="SUPPLY"/>SUPPLY
</td>

我尝试使用 jquery 但它会改变所有 <td> table 上的背景颜色:

<?php if (empty($purchase_category) || empty($purchase_mode)) { ?>
    <script>
        $(document).ready(function(){
            $("td").css("background-color", "red");
        });
    </script>';
<?php } ?>

Answer 1

您可以创建一个包含所有无效字段名称属性的字符串数组，然后它会注意为这些字段设置背景颜色:

function ValidateForm(invalidFields){
$("td input").each(function(){
  if($.inArray(this.name,invalidFields) >= 0){
    $(this).parent().css("background-color","rgba(244, 67, 54, 0.33)");
    }
  });
};

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="checkbox" name="purchase_mode" value="DIRECT" />Direct
    </td>
    <td>
      <input type="checkbox" name="description" value="SUPPLY" />SUPPLY
    </td>
  </tr>
  <tr>
      <td><input type="button" onclick="ValidateForm(['purchase_mode'])" value="Validate Form"></td>
  </tr>
</table>