テーブルの行要素を動的にカウント＆ハイライト表示

Question

私は2つのことができるようにしたい。最初は、特定の値のすべての「選択された」アイテムを見ます。私はa、b、cを持っていると言う。私は "c"として選択されたすべてのアイテムを探し、そのテーブル行を別の色として強調したいと思います。さらに、フォームを開くと、アイテム数をカウントし、画面上部にメッセージdivを表示して、強調表示されたアイテムを表示することができます。これを行う最良の実践的な方法は何ですか？

//Start loop of items 
     <?php foreach ($data['Detail'] as $key=>$item){?> 
     <tr id="tr_<?php echo $key+1?>"> 
      <td> 
       <select value="<?php echo $location; ?>" name="[<?php echo $key;?>][location]" id="location_<?php echo $key+1?>" class="form-control> 
        <option value="Selection1" <?= ($item['location']) == 'Selection1' ? 'selected' : '' ?>>Selection1</option> 
        <option value="Selection2" <?= ($item['location']) == 'Selection2' ? 'selected' : '' ?>>Selection2</option> 
        <option value="Selection3" <?= ($item['location']) == 'Selection3' ? 'selected' : '' ?>>Selection3</option> 
       </select> 
      </td> 
     </tr> 
// Segment here to count? Example : 
// $location_count = 0; If $location = 'c' then $location_count++; 
    <?php } ?> 

サンプル本部コード：

<div> 
<p>You have <?php echo $location_count?> Locations that need reviewed</p> 
</div> 

ワーキングコードの画像サンプル：

Answer 1

理論は次のとおりです。

• ループtableを通じてこれが私の元のコードですのselect要素
• 各selectの値をチェックし、行のスタイルを更新します。
• 選択が変更された場合は、現在の行と同じにします。
• ハイライトで行を数えますが、以下のコード/リンクでの練習に理論を見ることができる行はdiv要素

に数える追加します。 コードは意図的にデモンストレーションのために単純化されており、パフォーマンス/簡潔さを向上させることができます。しかし、それは悪いコード:)

$(function() { 
 

 
    /* function to run for select boxes in table */ 
 
    
 
    function rowState($select) { 
 

 
    var selected = false; 
 
    
 
    /* set boolean for selected */ 
 
    
 
    if ($select.val() === "c") { 
 
     selected = true; 
 
    } 
 
    
 
    /* apply css class to the row if selected */ 
 
    
 
    $select.closest("tr").toggleClass("c", selected); 
 
    
 
    /* count rows */ 
 
    
 
    var n = $("table tr.c").length; 
 
    
 
    /* change the html element's text to the count */ 
 
    
 
    $(".snippet span").text(n); 
 

 
    } 
 

 
    $("table select").each(function() { 
 
    
 
    /* on page load, set selected states */ 
 
    
 
    rowState($(this)); 
 
    
 
    }).on("change", function() { 
 
    
 
    /* on state change, set selected states */ 
 
    
 
    rowState($(this)); 
 
    
 
    }); 
 

 

 

 

 
});

table { 
 
    width: 100%; 
 
} 
 
tr td { 
 
    background: #eee; 
 
} 
 
tr.c td { 
 
    background: #cfc 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 

 
<div class="snippet"> 
 
    Please review <span>x</span> items 
 
</div> 
 

 
<table> 
 
    <tr> 
 
    <td> 
 
     <select> 
 
     <option value="a" selected>a</option> 
 
     <option value="b">b</option> 
 
     <option value="c">c</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select> 
 
     <option value="a">a</option> 
 
     <option value="b">b</option> 
 
     <option value="c" selected>c</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
    <tr> 
 
    <td> 
 
     <select> 
 
     <option value="a">a</option> 
 
     <option value="b" selected>b</option> 
 
     <option value="c">c</option> 
 
     </select> 
 
    </td> 
 
    </tr> 
 
</table>