変更​​検証後の背景色

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

あなたはすべて無効なフィールドに文字列の配列を作成することができますプロパティに名前を付けて、それはこれらのフィールドの背景色を設定するために世話をします。

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>

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コードを使用して、cssを使用してtdの色を変更します.1つの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>'