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>背景颜色：

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

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

要使用jQuery，您需要为即将更改的td提供某种ID。这可以是id属性，也可以是jQuery.parent

$(document).ready(function(){
  $('input[name=purchase_mode]').parent().css("background-color", "red")
});

这使用输入的名称作为唯一标识符，获取其父项<td>并设置其背景颜色。

但是，您可能需要考虑使用插件。它更容易使用和实现，并且不易出错。

Answer 3

您可以在顶部写一个if条件并有条件地决定一个类名。然后使用下面提到的Jquery Code，使用css更改td的颜色，我将向您展示一个td的代码。你可以做其余的事。

<?php if  (!empty($purchase_mode)){
           $class_name = "green-color";
         }  else{
           $class_name = "red-color";
    } ?>

 <!-- --- Your html code below---- -->

   <td class="<?php echo $class_name;?>"> 
       <input type="checkbox" name="purchase_mode" value="DIRECT">Direct
   </td>

 <!-- Jquery --->

 <script>
      $(document).ready(function(){
        $("td").each(function() {
            if($(this).hasClass("green-color")){
                  $(this).attr("style", "background-color:green");
            }else{
                  $(this).attr("style", "background-color:red");
            }
          });
        });
 </script>'

验证后更改背景颜色

3 个答案: