Skip to Content
Meniu
Trebuie să fiți înregistrat pentru a interacționa cu comunitatea.
Această întrebare a fost marcată
3 Răspunsuri
3355 Vizualizări

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?

Imagine profil
Abandonează
Cel mai bun răspuns

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.

Imagine profil
Abandonează
Cel mai bun răspuns

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

Imagine profil
Abandonează

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;
}

Cel mai bun răspuns

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

Imagine profil
Abandonează
Related Posts Răspunsuri Vizualizări Activitate
0
iul. 21
2463
0
feb. 21
2042
1
sept. 24
1524
1
mai 23
2254
0
iul. 22
40