تخطي للذهاب إلى المحتوى
القائمة
لقد تم الإبلاغ عن هذا السؤال
3 الردود
3351 أدوات العرض

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?

الصورة الرمزية
إهمال
أفضل إجابة

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.

الصورة الرمزية
إهمال
أفضل إجابة

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

الصورة الرمزية
إهمال

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

أفضل إجابة

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

الصورة الرمزية
إهمال
المنشورات ذات الصلة الردود أدوات العرض النشاط
0
يوليو 21
2463
0
فبراير 21
2041
1
سبتمبر 24
1523
1
مايو 23
2253
0
يوليو 22
40