前端实现表格中的颜色变化以及不同点击效果

环境：

        Python flask框架下的 html页面

目标：

        1. 实现根据不同status显示不同颜色

        2. 实现表格中对应链接根据不同状态不同点击效果

效果：

        不同任务状态不同颜色显示，不同重启次数不同颜色显示，WebUi 在RUNNING状态点击跳转到对应web，其他状态则点击提示 任务未运行，无法跳转

实现：

html

 <div class="card-body">
       <div class="table-responsive" style="">
            <table id="flinkRunInfo" class="table align-items-center" style="">
                <tbody>
                </tbody>
            </table>
       </div>
</div>

js部分：

对于需要改变颜色的列需要多添加<span></span>标签，要不会把整个表格变色

 第一列 页面跳转的也要添加<a></a>标签来实现链接显色：

href=javaScript:void(0);表示 只保留链接的样式

{#判断运行状态来修改对应表格的css效果#}
                    $("#flinkRunInfo td:nth-child(3)").each(function () {
                        if ($(this).children("span:first-child").text() === 'RUNNING') {
                            $(this).children("span:first-child").css({
                                'color': "#fff",
                                'backgroundColor': "#52c41a",
                                'padding': "3px 5px",
                                'display': 'inline-block'
                            })
                        } else {
                            $(this).children("span:first-child").css({
                                {#'color': "#fff",#}
                                'backgroundColor': "#d9d9d9",
                                'padding': "3px 5px",
                                'display': 'inline-block'
                            })

                        }
                    });


                    {#判断重启次数来添加css效果#}
                    $("#flinkRunInfo td:nth-child(4)").each(function () {
                        {#console.log($(this).children("span:first-child").text())#}
                        var failedNUm = $(this).children("span:first-child").text()
                        var intFailedNum = parseInt(failedNUm)
                        {#console.log(intFailedNum)#}

                        if (intFailedNum > 0) {
                            $(this).children("span:first-child").css({
                                'color': "#fff",
                                'backgroundColor': "#ff4d4f",
                                'padding': "3px 5px",
                                'display': 'inline-block'
                            })
                        }


                    });



{#根据状态来实现不同点击效果#}
                    $('#flinkRunInfo tbody td:nth-child(1)').on('click', function (e) {

                        console.log($(e.target).closest('tr'))
                        var jobStatue = $(e.target).closest('tr')[0].children[2].innerText;
                        var joburl = $(e.target).closest('tr')[0].children[6].innerText;


                        if (jobStatue === 'RUNNING') {

                            window.open(joburl)
                        } else if (jobStatue === 'CANCELLED') {
                            window.alert("任务未运行，无法跳转")
                            {#alert('任务未运行，无法跳转')#}
                        }
                    });

closest 方法返回被选元素的第一个祖先元素，这样就可以获取同一行的数据信息了