【Django-Talent系统】JS来调整字体颜色--20220609

效果：JS来调整字体颜色

JS代码

<!-- 调整color的js脚本开始 -->
<script>
    window.onload = function(){
        paradom1 = document.getElementsByClassName("p1")
        console.log(paradom1)
        for (i = 0 ; i < paradom1.length; i++) {
            var para = document.getElementsByClassName("p1")[i];if (para.textContent ='N') {para.style.color = "red";}else if (para.textContent ='Y') {para.style.color = "green";}else{para.style.color = "black";}
        }
    }
</script>
<!-- 调整color的js脚本结束 -->

完整代码

{% extends 'base.html' %}
{% load static %}

{% block body_block %}
<!-- 调整color的js脚本开始 -->
<script>
    window.onload = function(){
        paradom1 = document.getElementsByClassName("p1")
        console.log(paradom1)
        for (i = 0 ; i < paradom1.length; i++) {
            var para = document.getElementsByClassName("p1")[i];if (para.textContent ='N') {para.style.color = "red";}else if (para.textContent ='Y') {para.style.color = "green";}else{para.style.color = "black";}
        }
    }
</script>
<!-- 调整color的js脚本结束 -->

<div class="container">
    <div class="row py-4 align-items-center">
        
        <!--展示显示人员-->
        <div class="col-lg-12 col-md-12 mt-0 table-responsive"  style="background-color: #fff;">
            <!--表单--> 
            <h2>学员名单列表</h2>
            
            <!--HR或管理员才显示导出功能-->
            {% if request.user.employeeuser.remark == 'HR' or request.user.is_superuser %}
            <button type="button" class="btn btn-outline-secondary"><a class="" href="/export_excel2/">导出数据</a></button>
            {% endif %}

            <!--表单--> 
            <table class="table table-striped table-bordered ">
                <thead>
                    <tr style="color:White;background-color:#3366FF;font-family:微軟正黑體,Tahoma,Arial,微軟雅黑體;font-size:15px;">
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                        <th scope="col">111</th>
                    </tr>
                </thead>
            
                {% for employee in employee_list %}
                <tr valign="middle" style="color:Black;border-color:#E0E0E0;font-size:15px;"></tr>
                    <td><a href="/student_profile/{{employee.employee_id}}/">MORE</a></td>
                    <td>{{ employee.site |default_if_none:''}}</td>
                    <td>{{ employee.plantid |default_if_none:''}}</td>
                    <td>{{ employee.employee_dept |default_if_none:''}}</td>
                    <td>{{ employee.employee_name |default_if_none:''}}</td>
                    <td>{{ employee.employee_id |default_if_none:''}}</td>
                    <td class="p1">{{ employee.turnoverrate_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.Personal_goal_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.Group_goal_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.KPI_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.competition_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.workshop_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.oneonone_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.leadership_case_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.ddi_training_finished_or_not |default_if_none:''}}</td>
                    <td class="p1">{{ employee.manager_training_finished_or_not |default_if_none:''}}</td>

                </tr>
                {% empty %}
                    <li>No data yet.</li>
                {% endfor %}
                
            </table>

        </div>
    </div>
</div>

<br>
<br>
<br>
<br>
<br>
{% endblock %}