How to change the color of the specific row in a table in javascript
foreach($this->paginator as $record)
{
echo "<td width='61'> <a href='#' class='test' data-id='" . $record['id']. "'>". $record['id'] . "</td>";
echo "<td width='61'>". $record['firstname'] . "</td>";
}
Add style="background-color: #123" to the tr-element containing the td elements.
You may try this using CSS like;
tr:nth-child(even) {background: #CCC}
tr:nth-child(odd) {background: #FFF}
Or jQuery like;
$("#Your-ID > li:nth-child(odd)").addClass("odd");
In case you want to color a specific row
$('table tr:eq(3)').addClass('highlight')
Replace the number (3) with the index of the row you want to highlight. It's probably a better idea to do this server side though: Render the 'highlight' class on the backend.
Related
As a part of a Bootstrap table I have the following code:
<xp:text escape="false"
id="tableRowstart" >
<xp:this.value><![CDATA[#{javascript:
if (rIndex % 2){
return "<tr style='background-color:#e6e6e6'><td>"
}else{
return "<tr style='background-color:#fbfbfb'><td>"}}]]></xp:this.value>
</xp:text>
this is part of a repeat control and rIndex is the repeat index value. The above code works fine, but I want to use it in a css. So I added these lines to my css:
.oddLineBackground {background-color:#e6e6e6 ;}
.evenLineBackground {background-color:#fbfbfb ;}
If I modify my code to use the css as follows:
<xp:text escape="false"
id="tableRowstart" >
<xp:this.value><![CDATA[#{javascript:
if (rIndex % 2){
return "<tr style='oddLineBackground'><td>"
}else{
return "<tr style='evenLineBackground'><td>"}}]]></xp:this.value>
</xp:text>
The line colors do not change, they display with no style applied. I can apply the oddLineBackground and evenLineBackground to a panel or ??? directly from the style picker and they display correctly but when I compute them they don't seem to compute correctly. I'm guessing that it is something in my syntax, but can't figure it out.
Change:
<tr style='oddLineBackground'>
to this:
<tr class='oddLineBackground'>
I need to apply a style class that will make a minumum margin to the right of labels. The tag is shown here with class "label-format":
echo '<p><span class="label-format">Make: </span>' . $term->name . '</p>';
echo '<p><span class="label-format">Model: </span>' . $term->name . '</p>';
echo '<p><span class="label-format">Condition: </span>' . $term->name . '</p>';
and I need to make it so that the values are pushed to the right like so (the periods represent whitespace):
Make:.........Ford
Model:........Focus
Condition:...New
the best I can get with margins is:
Make:...Ford
Model:...Focus
Condition:...New
A more maintainable option would simply be to use a table. For the <td>s containing the properties of $term, you could set text-align: left; and it will look the same.
You may use inline-block and whidth:
p span {
display:inline-block;
width:5em; /* here set width that you want*/
}
float:left; works too :)
I have part of a code where it displays a Multi Select box and displays the options depending on the if statement:
$moduleSELECT = '<select name="moduletextarea" id="moduleselect" size="10">'.PHP_EOL;
if($modulenum == 0){
$moduleSELECT .= "<option disabled='disabled' value=''>No Modules currently on this Course</option>";
}else{
while ( $currentmodstmt->fetch() ) {
$moduleSELECT .= sprintf("<option disabled='disabled' value='%s'>%s - %s</option>", $dbModuleId, $dbModuleNo, $dbModuleName) . PHP_EOL;
}
}
$moduleSELECT .= '</select>';
Now from doing some research on the internet I think it is bad practice to include tags inside option tags. So my question is that if the if statement is true where number of records in 0, how can I display the text for "<option disabled='disabled' value=''>No Modules currently on this Course</option>"; in red colour and if the else statement is met how can I display these options sprintf("<option disabled='disabled' value='%s'>%s - %s</option>", $dbModuleId, $dbModuleNo, $dbModuleName) . PHP_EOL; in black colour text?
Thanks
just set a css style to the select (if there are no options), in this case color: red;
you can also have different colors for the options as well, just set different colors on each option. example fiddle here: http://jsfiddle.net/kennypu/CP8Xf/1/
I don't believe you can style individual <option> tags with CSS, but you could style the entire <select> as #kennypu points out.
Another way to achieve the results you want with a better/more intuative UI might be to only output the <select> tag when you actually have data to put inside it. When $modulenum == 0 maybe you should just output some different HTML that you can style properly.
HTML
<div class='no-data'>No Modules currently on this Course</div>
CSS
.no-data{
background-color: #CCC;
color: red;
padding: 5px;
}
i have this line:
echo "<td class='td_show_contact_item' color='#ff0000' align='left'>".link_to($msg->getSubject(), 'messagebox/read?cursor='.$cursor,'class=link_medium_red')."</td>";
i cannot find where td_show_contact_item is defined?? i grep'd it but found nothing so i want to just override the color property as it is now the link text is blue and only when you hover over it displays red..i want the link text red please?
thank you
To find td_show_contact_item you could use FireFox FireBug plugin.
To change the color of this element, you could write it inline like:
<td class='td_show_contact_item' style='color:#FF0000 !important;' align='left'>
Or add a second class:
.td_class, .td_class a, .td_class a:visited
{
color:#FF0000 !important;
}
<td class='td_show_contact_item td_class' align='left'>
Notice !important has been added to ensure the current style is overridden.
It's best to do this via .css, since the link-color is not the same as the td color.
If it's really not defined, you can add the td_show_contact_item to your css file, and change the link-color for links within
.td_show_contact_item a {
color: #ff0000;
}
(Perhaps, add .td_show_contact_item a:visited as well)
echo "<td class='td_show_contact_item' style='color=#ff0000; text-align=left'>"
.link_to($msg->getSubject(), 'messagebox/read?cursor='.$cursor,'class=link_medium_red')."</td>";
Language: PHP, HTML
Hi, I am having an issue with making some buttons that represent rooms.
Each button is labelled with a room number and I am trying to get the buttons to be side by side.
foreach($row1 as $row2)
{
echo "<form method='post' action='ss room details.php'>";
echo "<button>".$row2."</button>";
echo "<input type=hidden name=roomNum value=".$row2.">";
echo "</form>";
}
echo "</td>";
The buttons are listed vertically and make a new line for each button. How do I display it horizontally?
Thanks!
The buttons wouldn't probably end up next to each other horizontally, except for the fact that you're including each one in a separate form element. In your css, you can float the form left:
form {
float: left;
}
You could also float the buttons, too -- make sure to try it in different browsers. Wouldn't hurt to include a CSS reset template too.
You can either use float:left like #compeek has mention or you can use break tags like this:
foreach($row1 as $row2)
{
echo "<form method='post' action='ss room details.php'>";
echo "<button>".$row2."<br/>";
echo "<input type=hidden name=roomNum value=".$row2."><br/>";
echo "</form>";
}
echo "";
You want to float: left; (CSS) on each one.
However, floating acts kind of strange sometimes, so you'll definitely want to do some Googling to get a good idea of how it works.
So, to quickly show you with inline CSS, modifying your original code:
foreach($row1 as $row2)
{
echo "<form method='post' action='ss room details.php'>";
echo "<button style=\"float: left;\">".$row2."</button>";
echo "<input type=hidden name=roomNum value=".$row2.">";
echo "</form>";
}
echo "</td>";
EDIT: It's never a good idea to use inline CSS, though, so putting the CSS in your spreadsheet is a much better idea:
button {
float: left;
}
I would tend to use display: inline. This will make the form and the button behave like normal elements in the text flow. Do a line break <br> where necessary.
form { display: inline }
button { display: inline }