生成表格

最新推荐文章于 2022-11-24 14:35:00 发布
qaqLjj
最新推荐文章于 2022-11-24 14:35:00 发布
阅读量280
点赞数
本文链接：https://blog.csdn.net/qaqljj/article/details/99617580
版权
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Document</title>
  <style>
    input {
      /* vertical-align: text-bottom */
      margin: 0.4rem;
    }

    label {
      margin-right: 20px;
      font-size: 20px;
    }

    table {
      border-collapse: collapse;
      margin: 0 auto;
      text-align: center;
    }

    table,
    td,
    table th {
      border: 1px solid #cad9ea;
      color: #666;
      height: 30px;
    }

    table thead th {
      background-color: #cce8eb;
      width: 100px;
    }

    table tr:nth-child(odd) {
      background: #fff;
    }

    table tr:nth-child(even) {
      background: #f5fafa;
    }

    #region {
      text-align: center;
    }
  </style>
</head>

<body>
  <div id="region">
    <input type="radio" data-region="华东" name="region" id="华东" />
    <label data-region="华东" for="华东">华东</label>
    <input type="radio" data-region="华北" name="region" id="华北" />
    <label data-region="华北" for="华北">华北</label>
    <input type="radio" data-region="华南" name="region" id="华南" />
    <label data-region="华南" for="华南">华南</label>
    <br />
    <input type="radio" data-product="手机" name="product" id="手机" />
    <label data-product="手机" for="手机">手机</label>
    <input type="radio" data-product="笔记本" name="product" id="笔记本" />
    <label data-product="笔记本" for="笔记本">笔记本</label>
    <input type="radio" data-product="智能音箱" name="product" id="智能音箱" />
    <label data-product="智能音箱" for="智能音箱">智能音箱</label>
  </div>
  <div id="table-wrapper">
    <table id="tb"></table>
  </div>
</body>
<script>
  const region = document.getElementById("region");
  const month = ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"];
  var sourceData =
    [
      {
        // 数据源数组
        product: "手机",
        region: "华东",
        sale: [120, 100, 140, 160, 180, 185, 190, 210, 230, 245, 255, 270]
      },
      {
        product: "手机",
        region: "华北",
        sale: [80, 70, 90, 110, 130, 145, 150, 160, 170, 185, 190, 200]
      },
      {
        product: "手机",
        region: "华南",
        sale: [220, 200, 240, 250, 260, 270, 280, 295, 310, 335, 355, 380]
      },
      {
        product: "笔记本",
        region: "华东",
        sale: [50, 60, 80, 110, 30, 20, 70, 30, 420, 30, 20, 20]
      },
      {
        product: "笔记本",
        region: "华北",
        sale: [30, 35, 50, 70, 20, 15, 30, 50, 710, 130, 20, 20]
      },
      {
        product: "笔记本",
        region: "华南",
        sale: [80, 120, 130, 140, 70, 75, 120, 90, 550, 120, 110, 100]
      },
      {
        product: "智能音箱",
        region: "华东",
        sale: [10, 30, 4, 5, 6, 5, 4, 5, 6, 5, 5, 25]
      },
      {
        product: "智能音箱",
        region: "华北",
        sale: [15, 50, 15, 15, 12, 11, 11, 12, 12, 14, 12, 40]
      },
      {
        product: "智能音箱",
        region: "华南",
        sale: [10, 40, 10, 6, 5, 6, 8, 6, 6, 6, 7, 26]
      }
    ];
  let query = {};
  [].forEach.call(region.querySelectorAll("input"), element => {
    element.onclick = function (e) {
      // console.log(e.target.dataset.region);
      // console.log(e.target.name);
      // renderTable(getData(e.target.name, e.target.dataset[e.target.name]));
      // {
      //     product: "",
      //     region: ""
      //   }
      query[this.name] = this.dataset[this.name];

      renderTable(getData(query));
    };
  });

  function getData(rules) {
    let ruleKeys = Object.keys(rules);
    if (ruleKeys.length === 1) {
      return sourceData.filter(element => {
        return element[ruleKeys[0]] === rules[ruleKeys[0]];
      });
    }
    return sourceData.filter(element => {
      return (
        element[ruleKeys[0]] === rules[ruleKeys[0]] &&
        element[ruleKeys[1]] === rules[ruleKeys[1]]
      );
    });
  }
  
  function renderTable(data) {
    let template = "";
    //生成表头数组
    let headData = ["商品", "地区"].concat(month);
    // 输出表头：商品、地区、1月、2月、…… 12月
    for (let i = 0; i < 14; i++) {
      if (i === 0) {
        template += `<thead>`;
      }
      template += `<th>${headData[i]}</th>`;
      if (i === 13) {
        template += `</thead>`;
      }
    }
    // 遍历数据 {
    //     输出每一行的表格HTML内容
    // }
    let tBody = "";
    for (let i = 0; i < data.length; i++) {
      const element = data[i];
      for (let j = 0; j < 14; j++) {
        if (j === 0) {
          tBody += `<tr><td>${element.product}</td>`;
          continue;
        }
        if (j === 1) {
          tBody += `<td>${element.region}</td>`;
          continue;
        }
        tBody += `<td>${element.sale[j - 2]}</td>`;
        if (j === 13) {
          tBody += `</tr>`;
        }
      }
    }
    template += tBody;
    // 把生成的HTML内容赋给table-wrapper
    tb.innerHTML = template;
  }
    //处理源数据
    // eg 华北 -> 笔记本 -> sale
    // function handleData(data) {
    //   let oData = {}
    //   data.forEach(v => {
    //     if (!oData[v.region]) {
    //       oData[v.region] = []
    //     }
    //     oData[v.region].push({
    //       product: v.product,
    //       sale: v.sale
    //     })
    //   });
    //   return oData
    // }
    // const oData = handleData(sourceData)
    // //渲染radio
    // let regionName = Object.keys(oData)
    // regionName.forEach((v) => {
    //   console.dir(v);
    //   region.innerHTML += `<input name="regionRadio" id="${v}" value="${v}" type="radio"> <label for="${v}">${v}</label>`
    // });
    // //注册点击事件，根据获取的地区名称，调用函数渲染表格
    // [].forEach.call(region.querySelectorAll("input"), (v) => {
    //   v.onchange = function () {
    //     tb.innerHTML = ''
    //     let name = this.value;
    //     renderTable({ name, data: oData[name] });
    //   }
    // })
    // const month = ["01月", "02月", "03月", "04月", "05月", "06月", "07月", "08月", "09月", "10月", "11月", "12月"]
    // function renderTable({ name, data }) {
    //   console.log(name);
    //   console.dir(data)
    //   // 输出表头：商品、地区、1月、2月、…… 12月
    // let thead = document.createElement('thead')
    //   let arr = ["商品", "地区"].concat(month)
    //   let template = ''
    //   for (let i = 0; i < 14; i++) {
    //     template += `<th>${arr[i]}</th>`
    //   }
    //   thead.innerHTML = template;
    //   tb.appendChild(thead)
    //   // 遍历数据 {
    //   //     输出每一行的表格HTML内容
    //   // }
    //   for (let i = 0; i < data.length; i++) {
    //     tr = document.createElement('tr')
    //     let sale = data[i].sale.reduce((pre, cur) => {
    //       pre += `<td>${cur}</td>`
    //       return pre
    //     }, '')
    //     tr.innerHTML = name + data[i].product + sale
    //     tr.innerHTML = `<td>${name}</td>` + `<td>${data[i].product}</td>` + sale
    //     tb.appendChild(tr)
    //   }
    //   // 把生成的HTML内容赋给table-wrapper
    // }
</script>

</html>
qaqLjj
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
生成表格

<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equi...
复制链接

扫一扫
生成表格

“相关推荐”对你有帮助么？
