Question

我希望能够做两件事。首先，看看所有＆＃34;选择＆＃34;具有一定价值的物品。说我有一个，b，c;我想查找选择的所有项目＆＃34; c＆＃34;并将该表格行突出显示为不同的颜色。此外，在打开表单时，我希望计算项目，并能够在屏幕顶部显示消息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 Div Code示例：

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

工作代码的图像样本：

Answer 1

理论是：

循环浏览table的{{1}}元素
检查每个select的值并更新行样式
当选择更改时，对当前行执行相同操作。
使用突出显示
将行计数附加到div

您可以使用下面的代码/链接在实践中看到理论。代码有目的地简化了演示，并且可以针对性能/简洁性进行改进。但是，它不是坏代码：）

＆＃13;

select

＆＃13;

$(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));
    
  });




});

＆＃13;

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

＆＃13;

伯爵＆amp;动态突出显示表行元素

1 个答案: