【问题标题】:Change table background color when change row value PHP更改行值PHP时更改表格背景颜色
【发布时间】:2013-11-04 17:12:22
【问题描述】:

我有一个像下面这样的 PHP 表,我需要它,当第一列更改值时,该行会更改颜色。 例如:在示例中的表格中,第一行和第二行将是红色,第三行将是蓝色,第四行再次是红色,依此类推

<table>
<tr>
    <td>1</td>
    <td>Test 1</td>
    <td>Today</td>
</tr>
<tr>
    <td>1</td>
    <td>Test 2</td>
    <td>Tomorrow</td>
</tr>
<tr>
    <td>2</td>
    <td>Test 3</td>
    <td>Yesterday</td>
</tr>
<tr>
    <td>3</td>
    <td>Test 1</td>
    <td>Next Saturday</td>
</tr>
</table>

我可以使用 CSS、jQuery 或其他语言,但我需要帮助。

谢谢

【问题讨论】:

  • 值如何改变?您的示例代码不包含 PHP 或 JavaScript。
  • 请向我们提供一些您用来更改值的 PHP 或 Javascript 代码。无论如何,jQuery 或 javascript 将是解决方案,除非您想在每次获取值时重新加载页面改变了。

标签: php jquery css


【解决方案1】:

试试这个:

$bgcolor       = ""; 
$new_bgcolor   = "#F1F1F1";
$bgcolor_trans = "";

if ( $current_row > $last_row ){
   $bgcolor_trans = $bgcolor;
   $bgcolor       = $new_bgcolor;
   $new_bgcolor   = $bgcolor_trans;    
} 

【讨论】:

    【解决方案2】:

    您可以为 TR 设置两个类,例如rowOdd & rowEven

    $days = array(1=>'Day1', 2=>'Day2', 3=>'Day3');
    $trClass='Odd';
    echo '<table>';
    foreach ($days as $key=>$value) {
        echo '<tr class="row'.$trClass.'"><td>'.$key.'</td><td>'.$value.'</td></tr>';
        if ($trClass=='Odd') { $trClass='Even'; } else { $trClass='Odd'; }
    }
    echo '</table>';
    

    CSS

    .rowOdd { background-color: #F00; }
    .rowEven { background-color: #0F0; }
    

    【讨论】:

    • 线条颜色也需要根据第一个单元格值的变化而变化。您的示例将使用颜色(条纹)打印每一行。
    • 你有多少可能的值?如果没有太多可能而不是 rowEven & rowOdd 你可以有 class="row=$cellValue?>" 并创建必要的类
    【解决方案3】:

    您可以使用可验证的标志进行计数。

    例如:

    $count = 0;
    while($rows = mysql_fetch_array($query)){
        $count++;
        if(($count%2) == 0){
            echo '<tr style="background:#FFF">';
            echo    '<td>';
            echo    '</td>';
            echo '</tr>';
        }
        else{
            echo '<tr style="background:#000">';
            echo    '<td>';
            echo    '</td>';
            echo '</tr>';
        }
    }
    

    【讨论】:

      猜你喜欢
      • 2018-10-14
      • 2011-05-23
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2013-11-28
      • 1970-01-01
      • 2016-03-15
      • 1970-01-01
      相关资源
      最近更新 更多