js 表格拼接

roooxy

已于 2022-08-29 23:12:42 修改

阅读量418

点赞数

分类专栏： JavaScript 文章标签： javascript 前端

于 2022-08-24 19:24:58 首次发布

本文链接：https://blog.csdn.net/weixin_44611785/article/details/126511204

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

这两段代码展示了如何使用HTML、CSS和JavaScript创建动态表格来展示人员周产能力和模块实时状态。第一段代码通过遍历数组生成表格，用粉色背景高亮产能超过50的数据。第二段代码创建了一个模块状态表格，根据给定的状态映射显示不同颜色的单元格，用于表示运行状态。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <table border="1" cellpadding="20" cellspacing="0">
      <thead>
        人員周產能狀況
        <tr>
          <td>姓名</td>
          <td>週一</td>
          <td>週二</td>
          <td>週三</td>
          <td>週四</td>
          <td>週五</td>
          <td>週六</td>
          <td>週日</td>
        </tr>
      </thead>
      <tbody id="contain"></tbody>
    </table>
    <script>
      var arrList = [
        ["张三", 40, 50, 60, 55, 40, 70, 60],
        ["李四", 40, 50, 60, 55, 40, 70, 60],
        ["王五", 40, 50, 60, 55, 40, 70, 60],
        ["赵六", 40, 50, 60, 55, 40, 70, 60],
      ];
      var arr = [
        "F168554",
        "张三",
        "白班",
        "F2222",
        "李四",
        "晚班",
        "234",
        "王五",
        "白班",
        "F567",
        "赵六",
        "晚班",
      ];
      var arrs = [];
      arr.forEach((element, index) => {
        if (index % 3 == 1) {
          // console.log(element)
          arrs.push(element);
        }
      });
      //   console.log(111, arrs);
      var str = "";
      arrList.forEach((item) => {
        str += "<tr>";
        str += `<td>${item[0]}</td>`;
        item.slice(1).forEach((cell) => {
          str += `<td class="${cell > 50 ? "pink" : ""}">${cell}</td>`;
        });
      });
      // 将定义好的内容,写入到tbody标签中
      contain.innerHTML = str;
    </script>
    <style>
      table {
        border: 1px solid blueviolet;
      }
      .pink {
        background-color: pink;
      }
    </style>
  </body>
</html>



進階版本


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .table_sub {
      border-collapse: collapse;
      overflow: scroll;
      width: 100%;
    }
    table.table_sub td {
      padding: 0.3rem 0;
      font-size: 1rem;
      border-bottom: 1px groove #00e0db;
    }
    td {
      border: 1px solid #333;
    }

    .Moduleall {
      width: 100%;
      cursor: pointer;
      text-align: center;
    }
    .ModuleCss {
      /* background-color:#012141; */
      /* color:#ffff */
    }
    .green {
      background-color: green;
    }
    .yellow {
      background-color: yellow;
    }
    .red {
      background-color: red;
    }
    .blue {
      background-color: blue;
    }
  </style>
  <body>
    <div class="Moduleall">
      <table border="0px" id="mytable" class="table_sub">
        <tr>
          <td colspan="8" height="40px">模組實時狀態</td>
        </tr>
        <tr>
          <td width="16%">總控</td>
          <td width="20%">運行中綠色</td>
          <td width="20%">故障中紅色</td>
          <td width="20%">等待中黃色</td>
          <td width="20%">屏蔽中藍色</td>
        </tr>
        <tbody id="tb" class="ModuleCss"></tbody>
      </table>
    </div>

    <script>
      var str = "";
      var arr = [
        ["工件庫1", 1],
        ["工件庫2", 2],
        ["刀具庫1", 3],
        ["刀具庫2", 4],
        ["刀具庫3", 1],
        ["刀具庫4", 1],
        ["清洗幾", 1],
        ["CNC1", 2],
        ["CNC2", 1],
        ["CNC3", 1],
        ["CNC4", 3],
        ["CNC5", 1],
        ["CNC6", 1],
        ["CNC7", 1],
        ["CNC8", 1],
        ["CNC9", 1],
        ["CNC10", 1],
      ];
      const statusMap = {
        1: "green",
        2: "red",
        3: "yellow",
        4: "blue",
      };
      arr.forEach((ele) => {
        console.log(ele);
        str += "<tr>";
        str += `<td>${ele[0]}</td>`;
        console.log(222, str);
        let cell = ele[1];

        new Array(4).fill("").forEach((c, index) => {
          console.log(333, cell);
          const isCurrent = cell === index + 1;
        //   str += `<td class="${statusMap[cell]}"></td>`;
            str += `<td class="${isCurrent ? statusMap[cell] : ""}"></td>`;
        });
      });
      tb.innerHTML = str;
    </script>
  </body>
</html>