模板文字HTML表格中的三元运算符

Question

I am trying to set my table data to have a background color of red if it has a "Failed" status. 我试图将表格数据设置为具有“失败”状态的红色背景色。 I am having a hard time setting this inline style. 我很难设置这种内联样式。 At first I tried to use the ternary operator in the second td of the createTableData function but could not get it to work. 最初，我尝试在createTableData函数的第二个td中使用三元运算符，但无法使其正常工作。 Right now I am attempting to break it out into its own function but not working either. 现在，我正在尝试将其分解成自己的功能，但都不起作用。

Looking for help on setting the background color of my table data. 在设置表格数据的背景颜色方面寻求帮助。

HTML 的HTML

<body>
<div class="container-fluid">
    <div class="jumbotron">
        <h1 class="text-center mb-3">
            Active Directory Replication Health
        </h1>
    </div>



<div id="table"></div>


</div>


<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/script.js"></script>

Script 脚本

var data = [

{
    "DC":  "SV07CTDC1",
    "Connectivity":  "Passed",
    "Advertising":  "Failed"
},
{
    "DC":  "SVGCCTDC1",
    "Connectivity":  "Passed",
    "Advertising":  "Failed"
}
];

function checkStatus(status) {
status === "Failed" ? "background-color: red" : "background-color: blue"
}


function createTableData(dc ){
var html = ''
for( key in dc )
    html += `   
        <tr>
            <td> ${key} </td>
            <td style=${checkStatus(dc[key])} > ${dc[key]} </td>
        </tr>

`
return html
}


function createTable(dc) {
return `
    <div class="col-md-3 col-sm-6  ">
        <table class="table table-dark table-striped table-bordered table-hover">

                ${createTableData(dc)}



        </table>
    </div>  
`
}






document.getElementById("table").innerHTML = `
<div class="row">
    ${data.map(createTable).join("")}
</div>
`

Answer 1

The only thing you're missing in your checkStatus method is to return the condition result; 您在checkStatus方法中唯一缺少的是返回条件结果。

function checkStatus(status) {
  return status === "Failed" ? "background-color: red" : "background-color: blue"
}

updated codepen 更新的代码笔

模板文字HTML表格中的三元运算符

问题描述

1 个解决方案

解决方案1
2 已采纳 2018-09-19 20:06:15

模板文字HTML表格中的三元运算符

问题描述

1 个解决方案

解决方案1 2 已采纳 2018-09-19 20:06:15

解决方案1
2 已采纳 2018-09-19 20:06:15