根据条件改变列表元素的颜色 [英] change color of list elements according to condition

问题描述

我有两个表：

表1（整体分数）

Table 1 (overall Score )

表2（每周分数）

Table 2 (weekly score )

我有一个排行榜，表1中的总分数值：

I have a leaderboard where I am echoing the overall score value from Table 1 :

问题：我想在这里做的是，在表2（每周得分）中得分为-10的人，我想通过突出显示其框中的颜色来提醒用户

Problem : What I am trying to do here is that whoever scores "-10" in table 2 (weekly score) , I want to alert the user by highlighting the color of their box in the leaderboard ,which is yellow now, to red.

当前css涉及：

li mark div {
    display: block;
    margin: 4px;
    padding: 5px;
    min-height: 50px;
    border: 2px solid #eebb55;
    border-radius: 7pt;
    background: grey;
}

Php涉及显示列表。这是总体

Php involved to display the list.This is for "overall" (right tab in leader board) .Similar exist for weekly too .

<div id="overalllb" class="leadboardcontent" style="display:none">
    <div class="leaderboard">
        <ol>
            <li>
                <mark>
                    <?php  while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
                        echo  "<div class='parent-div'><span class='rank'>" . $toprow2['overallRank'] . "</span><span class='name'>" . $toprow2['EmployeeName'] . "</span><span class='points'>" . $toprow2['Total_points_Rewarded'] . "</span></div>";
                    } ?>
                </mark>
            </li>
        </ol>
    </div>

通过两个表检索信息的查询：

Queries passed to retrieve info from both the tables :

1.query 1 - 找出分数为-10的所有员工。

1.query 1 - to find out all the employees with a score of -10.

$q200 = " select *
  from Table2
  where  WeekNumber = 'week1' and pointsRewarded = '-10';";
  $stmt200=sqlsrv_query($conn,$q200);
  if($stmt200==false)
  {
  echo 'error to retrieve info !! <br/>';
  die(print_r(sqlsrv_errors(),TRUE));
  }

查询2-从表1检索所有员工： / strong>

query 2- to retrieve from table 1 all the employees :

$q20 = "select *
  from EmployeeTable
  order by Total_points_Rewarded desc";
  $stmt20=sqlsrv_query($conn,$q20);
  if($stmt20==false)
  {
  echo 'error to retrieve info !! <br/>';
  die(print_r(sqlsrv_errors(),TRUE));
  }

我试过的代码： >

Code that I tried with :

<?php while( $toprow20 = sqlsrv_fetch_array( $stmt20) ) {

echo  "<div class='parent-divv'><span class='rank'>" . $toprow20['overallRank'] . "</span><span class='name'>" . $toprow20['EmployeeName'] . "</span><span class='points'>" . $toprow20['Total_points_Rewarded'] . "</span></div>";

}?>
<?php if ($toprow20['EmployeeID'] == $toprow200['EmployeeID'] ) ?>{
  <style>
  .parent-divv {
  border: 1px solid red;
  }
  </style>
}

上述代码将所有颜色更改为红色。两个查询中的名称/ ID都是red.rest保持原样。

The code above changes all color to red.I want only matching names/ID in both queries to be red.rest remain as it is. I am using PHP,Please suggest me a way to do it.God bless.

推荐答案

我使用PHP，请给我建议一种方法。 1）将查询加入一个

1) Join the the queries into one

select EmployeeTable.*,Table2.pointsRewarded as `weeklyDelta`
from EmployeeTable join Table2 on EmployeeTable.EmployeeID = Table2.EmployeeID
where Table2.WeekNumber = 'week1'
order by Total_points_Rewarded desc

2）然后给负值增量的员工一个特殊类

2) Then give the employees with negative deltas a special class

<?php  
while( $toprow2 = sqlsrv_fetch_array( $stmt3) ) {
    echo  "<div class='parent-div" .
        ($toprow2['weeklyDelta'] <= -10 ? " dropped" : "") .
        "'><span class='rank'>" .
        $toprow2['overallRank'] . "</span><span class='name'>" . 
        $toprow2['EmployeeName'] . "</span><span class='points'>" . 
        $toprow2['Total_points_Rewarded'] . "</span></div>";
} ?>

3）给这些员工一个风格

3) give those employees a style

.parent-div.dropped { color:red }

这篇关于根据条件改变列表元素的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！