Skip to Content
Menu
This question has been flagged
3 Replies
3476 Views

I need to make the background color of some tr in table red
the table rows created by foreach loop and i need to coloring the background of row 1 , 4 ,6 and 7
so i thought that i can make a variable before foreach and increase it inside the foreach and make if condition inside foreach to enable me to color the mentioned rows


<tbody>
<tr t-foreach="attendance_ids" t-as="attendance" class="text-center">

       <td><span t-esc="attendance['employee_name']"/></td>
<td><span t-esc="attendance['employee_department']"/></td>
<td><span t-esc="attendance['attendance_days']"/></td>

        </tr>


</tbody>








How can i do that variable in xml?

Avatar
Discard
Best Answer

To achieve the desired background color for specific table rows within a `foreach` loop in Odoo templates, you can use conditional statements and CSS classes. Here's an example of how you can modify your code to accomplish this:



In this example, we've introduced a new variable called `row_number` before the `foreach` loop. We set its initial value to `1`. Inside the loop, we assign the class `row-{{ row_number }}` to each `tr` element. Finally, after the loop, we increment `row_number` by `1` to prepare it for the next row.


Now, you can define CSS rules for the specific row classes in your Odoo theme's CSS file. For example:


tr.row-1,
tr.row-4,
tr.row-6,
tr.row-7 {
background-color: red;
}

In this CSS code, we target the `tr` elements with the classes `row-1`, `row-4`, `row-6`, and `row-7`, and set their background color to red.


By combining the conditional statement and CSS classes, you can dynamically apply the desired background color to the specific rows based on their position in the loop.

Avatar
Discard
Best Answer

Hello Asmaa,

Instead of variable, you can do it with css easily. 

Please find code in comment. 

Hope it will be helpful to you.

Thanks & Regards,
Email: odoo@aktivsoftware.com
Skype: kalpeshmaheshwari

Avatar
Discard

Please find code here :-

First create new CSS file and link it to your template :
EX: <link rel="stylesheet" href="/module_name/static/src/css/style.css"/>

Then, Add unique class name in tbody tag :
<tbody class="custom_tbody">
<tr t-foreach="attendance_ids" t-as="attendance" class="text-center">
<td><span t-esc="attendance['employee_name']"/></td>
<td><span t-esc="attendance['employee_department']"/></td>
<td><span t-esc="attendance['attendance_days']"/></td>
</tr>
</tbody>

Now, you can give directly nth-child css :
.custom_tbody tr:nth-child(1) {
background-color: red;
}
.custom_tbody tr:nth-child(4) {
background-color: red;
}
.custom_tbody tr:nth-child(6) {
background-color: red;
}
.custom_tbody tr:nth-child(7) {
background-color: red;
}

Best Answer

Hi,

Try like below.

<t t-set="variable_name" t-value="initial_value"/>


    <tbody>


         <tr t-foreach="attendance_ids" t-as="attendance" class="text-center">


            <td><span t-esc="attendance['employee_name']"/></td>


            <td><span t-esc="attendance['employee_department']"/></td>


             <td><span t-esc="attendance['attendance_days']"/></td>


             <t t-set="variable_name" t-value="updated_value"/>


        </tr>


    </tbody>


Regards

Avatar
Discard
Related Posts Replies Views Activity
0
Jul 21
2552
0
Feb 21
2220
1
Sep 24
1706
1
May 23
2428
0
Jul 22
40