根据单元格的值更改 html 表格颜色

Question

我正在从 API 获取数据并将其显示在 html 表格中。 现在我想根据列的值更改行的颜色。 例如，如果状态为“已接受”，则为绿色行，如果状态为“不接受”，则为红色行。

<div class="container"></div>
    <table class="table">
       <thead>
          <tr>
            <th>Name</th>
            <th>Address<br>Status</th>
            <th>Status<br>Status</th>
          </tr>
      </thead>
   <tbody id="data">
   </tbody>
</table>
</div>
<Script>fetch("some url").then(
   res => {
     res.json().then(
       data => {
         console.log(data.data);
         if (data.data.length > 0) {
   
           var temp = "";
           data.data.forEach((itemData) => {
             temp += "<tr>";
             temp += "<td>" + itemData.Name + "</td>";
             temp += "<td>" + itemData.Address + "</td>";
             temp += "<td>" + itemData.Status + "</td></tr>";
           });
           document.getElementById('data').innerHTML = temp
   
   
         }
       }
     )
   }
   )
</script>

Answer 1

为了根据状态值更改行颜色，您可以在生成行时添加条件逻辑。您还可以根据状态将适当的 CSS 类或内联样式应用于元素。

    <div class="container">
        <table class="table">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Address</th>
                    <th>Status</th>
                </tr>
            </thead>
            <tbody id="data">
            </tbody>
        </table>
    </div>
    
    <script>
    fetch("some url").then(
        res => {
            res.json().then(
                data => {
                    if (data.data.length > 0) {
                        var temp = "";
                        data.data.forEach((itemData) => {
                            
                            let rowColor = itemData.Status === "Accepted" ? "green" : "red";
                            
                            temp += `<tr style="background-color: ${rowColor};">`;
                            temp += `<td>${itemData.Name}</td>`;
                            temp += `<td>${itemData.Address}</td>`;
                            temp += `<td>${itemData.Status}</td></tr>`;
                        });
                        document.getElementById('data').innerHTML = temp;
                    }
                }
            );
        }
    );
    </script>

我希望这能解决您的疑问。