8wDlpd.png
8wDFp9.png
8wDEOx.png
8wDMfH.png
8wDKte.png

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

Florian Klein 1月前

41 0

我正在从 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>
帖子版权声明 1、本帖标题:根据单元格的值更改 html 表颜色
    本站网址:http://xjnalaquan.com/
2、本网站的资源部分来源于网络,如有侵权,请联系站长进行删除处理。
3、会员发帖仅代表会员个人观点,并不代表本站赞同其观点和对其真实性负责。
4、本站一律禁止以任何方式发布或转载任何违法的相关信息,访客发现请向站长举报
5、站长邮箱:yeweds@126.com 除非注明,本帖由Florian Klein在本站《html》版块原创发布, 转载请注明出处!
最新回复 (0)
  • 要根据特定列的值动态更改表中的行颜色,您可以按照以下方法操作。我已使用 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>
返回
作者最近主题: