我正在从 API 中获取数据并将其显示在 html 表中。现在我想根据列的值更改行的颜色。例如，如果状态为“已接受”，则为绿色行，如果......
我正在从 API 中获取数据并将其显示在 html 表中。现在我想根据列的值更改行的颜色。例如，如果状态为“已接受”，则为绿色行，如果状态为“未接受”，则为红色行。
const url = "https://dummyjson.com/c/38f5-f39a-411e-aeb0";
fetch(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
}
}
)
}
)table {
border-collapse: collapse;
}
td,th {
border: thin solid black;
padding: 0.2rem;
}<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>
要根据特定列的值动态更改表中的行颜色，您可以按照以下方法操作。我已使用 JSONPlaceholder REST API 进行测试，但对于任何 API，其思路都是一样的。
fetch("https://jsonplaceholder.typicode.com/todos")
.then((response) => {
if (response.ok) {
return response.json();
} else {
throw new Error("API request failed");
}
})
.then((data) => {
if (data.length > 0) {
let temp = "";
data.forEach((itemData) => {
const rowClass = itemData.completed
? "completed-row"
: "not-completed-row";
temp += `<tr class="${rowClass}">`;
temp += `<td>${itemData.id}</td>`;
temp += `<td>${itemData.title}</td>`;
temp += `<td>${itemData.completed}</td></tr>`;
});
document.getElementById("data").innerHTML = temp;
}
})
.catch((error) => console.log("Error fetching data:", error)); .completed-row {
background-color: green;
color: white;
}
.not-completed-row {
background-color: red;
color: white;
} <div class="container">
<table class="table">
<thead>
<tr>
<th>Id</th>
<th>Title</th>
<th>Completed</th>
</tr>
</thead>
<tbody id="data"></tbody>
</table>
</div>