根据td值更改文本颜色

I have a table that returns values from my Mysql database without issue. What I want to do is change the font color to green if two of the five values is selected from radio buttons.

我有一个表从我的Mysql数据库返回值没有问题。如果从单选按钮中选择了五个值中的两个,我想要做的是将字体颜色更改为绿色。

The field that I wish to change the color is the "Category" field if the value is either Vegetarian or Vegan. All other options will be the default color (black).

如果值为素食或素食,我希望更改颜色的字段是“类别”字段。所有其他选项将是默认颜色(黑色)。

This is my code that displays the table data, which is displaying as I wish:

这是我的代码,显示表数据,显示如我所愿:

$richOutput = widgets\RichText::widget(['text' => $post->message,     'record' => $post]);
$richOutput_rname = widgets\RichText::widget(['text' => $post->rname, 'record' => $post]);
$richOutput_category = widgets\RichText::widget(['text' => $post->category, 'record' => $post]); ?>
<table>
<tr><td><span id="post-content-<?php echo $post->id; ?>" <?php print $richOutput; ?></span></font></td></tr>
<tr><td><span id="post-content-rname-<?php echo $post->id; ?>" <?php print $richOutput_rname; ?></span></td></tr>
<tr><td><span id="post-content-category-<?php echo $post->id; ?>" <?php print $richOutput_category; ?></span></td></tr>
</table>

Thank you in advance!

先感谢您!

Edit

I tried to add the following JS, but it did not change the text color when the value = "Vegan":

我试着添加以下JS,但是当值=“Vegan”时它没有改变文本颜色:

    <script type="text/javascript">
$('.cat').each(function(i, n) {
   if($(n).text() = "Vegan") $(n).css('color', '#8A1010');
});
</script>

2 个解决方案

#1

I didn't test this, but it should be correct. You should get the idea.

我没有测试这个,但它应该是正确的。你应该明白这个想法。

 <tr><td><span id="post-content-category-<?php echo $post->id; ?>" <?php $richOutput_category == "Vegan" ? echo 'style="color: #8A1010"' : echo '' ?>><?php print $richOutput_category; ?></span></td></tr>

Also you were missing a '>' on the span tag (all of them).

你也错过了span标签上的'>'(所有这些)。

#2

A good way to do it is to create a CSS class and apply that to the row with PHP. From a Separation of Concerns perspective this keeps the styles (CSS) separate from your content (HTML) and behaviour (Javascript).

一个好方法是创建一个CSS类并使用PHP将其应用于该行。从分离关注角度来看,这使得样式(CSS)与您的内容(HTML)和行为(Javascript)分开。

The stylesheet would contain:

样式表将包含:

.text_normal {
    color: #000;
}
.text_vegan-vegetarian {
    color: #8A1010;
}

Using PHP to add the class to the table row:

使用PHP将类添加到表行:

$richOutput = widgets\RichText::widget(['text' => $post->message,     'record' => $post]);
$richOutput_rname = widgets\RichText::widget(['text' => $post->rname, 'record' => $post]);
$richOutput_category = widgets\RichText::widget(['text' => $post->category, 'record' => $post]);

$class = 'text_normal';
if ($post->category == 'Vegan' || $post->category == 'Vegetarian') {
    $class = 'text_vegan-vegetarian';
}

?>
<table>
<tr><td><span id="post-content-<?php echo $post->id; ?>" <?php print $richOutput; ?></span></font></td></tr>
<tr><td><span id="post-content-rname-<?php echo $post->id; ?>" <?php print $richOutput_rname; ?></span></td></tr>
<tr class="<?= $class ?>"><td><span id="post-content-category-<?php echo $post->id; ?>" <?php print $richOutput_category; ?></span></td></tr>
</table>

Using a separate stylesheet will allow you to add a lot of other styles without making your HTML code messy. For example:

使用单独的样式表将允许您添加许多其他样式,而不会使您的HTML代码混乱。例如:

.text_normal {
    color: #000;
    background: #0CF;
    font-weight: bold;
    padding: 24px;
    line-height: 24px;
}
.text_vegan-vegetarian {
    display: none;
}

#1