根据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.

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":

    <script type="text/javascript">
$('.cat').each(function(i, n) {
   if($(n).text() = "Vegan") $(n).css('color', '#8A1010');
});
</script>
douliu7929
douliu7929 是的,文字颜色。
4 年多之前 回复
douyimin1083
douyimin1083 您可以在类别的<td>标记中放置一个简单的PHPif条件并应用css类或修改任何样式属性。你想要设置什么颜色-文本颜色或背景颜色。我认为textcolor。
4 年多之前 回复

2个回答

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).

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).

The stylesheet would contain:

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

Using PHP to add the class to the table row:

$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:

.text_normal {
    color: #000;
    background: #0CF;
    font-weight: bold;
    padding: 24px;
    line-height: 24px;
}
.text_vegan-vegetarian {
    display: none;
}
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
立即提问