table的问题

[cyyjm]

各位兄弟分享一个例子吧。
我想搞一个自适应的表格，数据从 ajax 或者 axios 导入到table里，表格就5列数据（id、name、location、operation、code），table里面每行数据最后两列分别是 操作(operation)和(code)二维码展示（这两个数据不是从ajax或axios获取的）。 操作列里有 新增、修改、删除（这些按钮都绑定了方法），二维码 这列再展示图片，我可以从一个json里面提取出图片的地址。 表格再弄个隔行换色就可以了。

[cyyjm]

有点触动和帮助，我自己要摸索出一点点。谢谢了

[jio可]

网上的web框架都支持，随便找一个都能用。

[cyyjm]

我知道，看了有点复杂。找资料慢

[jio可]

<table>
  <thead>
    <th>id</th>
    <th>name</th>
    <th>location</th>
    <th>operation</th>
    <th>code</th>
  </thead>
  <tbody id="tb">
  </tbody>
</table>
<style>
  table {
    width: 100%;
    text-align: center;
  }
  table tr:nth-of-type(odd) {
    background: #fff;
  }

  table tr:nth-of-type(even) {
    background: #ccc;
  }
</style>
<script>
  // 二维码
  let img = "xxx.png";
  let el = document.getElementById("tb");

  function ajax() {
    let data = [
      {
        id: "11",
        name: "test11",
        location: "xxx11"
      },
      {
        id: "22",
        name: "test22",
        location: "xxx22"
      },
      {
        id: "33",
        name: "test33",
        location: "xxx33"
      }
    ];

    data.forEach(item => {
      el.innerHTML += `<tr>
      <td>${item.id}</td>
      <td>${item.name}</td>
      <td>${item.location}</td>
      <td>
        <button onclick="add()">add</button>
        <button onclick="edit(${item.id})">edit</button>
        <button onclick="del(${item.id})">delete</button>
      </td>
      <td>
        <img src="${img}" />
      </td>
      </tr>`;
    });
  }

  function add() {
    console.log("add");
  }

  function edit(id) {
    console.log("edit "+id);
  }

  function del(id) {
    console.log("delete "+id);
  }
  ajax()
</script>