问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
开发者社区
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

如何为表格插入json数据？

头像
乔治白
    201031

    我想通过js完成对表格进行插入数据。该如何处理。例如有个json数据，格式如下：

      var stu = [
    { "name": "张三", "sex": "男", "fenshu": "100" },
    { "name": "李四", "sex": "男", "fenshu": "60" },
    { "name": "王五", "sex": "男", "fenshu": "90" }
  ];

    最终表格是三行4列，第4列数据是根据每行第3列的数据调用一个方法，然后输出到该行中的第四列中。

    javascript
    阅读 2.4k
    4 个回答
    得票最新
    头像
    白水
      1.8k1733
      <!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>
  <body>
    <table id="myTable">
      <thead>
        <tr>
          <th>姓名</th>
          <th>性别</th>
          <th>分数</th>
          <th>结果</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
</html>
<script>
  var stu = [
    { name: "张三", sex: "男", fenshu: "100" },
    { name: "李四", sex: "男", fenshu: "60" },
    { name: "王五", sex: "男", fenshu: "90" },
  ];
  const table = document.getElementById("myTable");

  const tbody = table.getElementsByTagName("tbody")[0];

  for (let i = 0; i < stu.length; i++) {
    const item = stu[i];
    const row = tbody.insertRow(i);
    const nameCell = row.insertCell(0);
    nameCell.innerHTML = item.name;

    const sexCell = row.insertCell(1);
    sexCell.innerHTML = item.sex;

    const scoreCell = row.insertCell(2);
    scoreCell.innerHTML = item.fenshu;

    const resultCell = row.insertCell(3);
    resultCell.innerHTML = calculateResult(item.fenshu);
  }
  function calculateResult(score) {
    if (score >= 80) {
      return "通过";
    } else {
      return "不通过";
    }
  }
</script>
      头像
      拉格朗日的假日
        1.6k1214

        先用 DOM 创建个表格， table.insertRow() 可以获取行指针，row.insertCell() 可以新增一行，返回值就是当前行的指针，通过行指针添加数据即可

        参考代码：

        <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <div class="table-container">
        </div>

        <script>
            const tableContainer = document.querySelector('.table-container')
            const table = document.createElement("table");
            const students = [{
                "name": "张三",
                "sex": "男",
                "score": 100
            }, {
                "name": "李四",
                "sex": "男",
                "score": 60
            }, {
                "name": "王五",
                "sex": "男",
                "score": 90
            }];

            // 遍历 stu 数组，并创建表格行和单元格来显示数据
            for (stu of students) {
                // 创建新的表格行
                const row = table.insertRow();

                // 在每一行中插入对应的单元格并填充数据
                const cell1 = row.insertCell();
                cell1.innerHTML = stu.name;

                const cell2 = row.insertCell();
                cell2.innerHTML = stu.sex;

                const cell3 = row.insertCell();
                cell3.innerHTML = stu.score;

                const cell4 = row.insertCell();

                // 调用方法计算并将结果填充到第四列
                const result = getScore(stu.score);
                cell4.innerHTML = result;
            }
            
            tableContainer.append(table)

            function getScore(score) {
                if (score >= 90) {
                    return "优秀";
                } else if (score >= 80) {
                    return "良好";
                } else if (score >= 60) {
                    return "及格";
                } else {
                    return "不及格";
                }
            }
        </script>
    </body>
</html>
        头像
        limingcan
          482127

          试一下这个库 xlsx

          头像
          边城
            59.8k157274

            多数情况下，只需要直接更新数据，然后就可以使用更新后的数据来进行处理的。当然这里也分两种情况，一种是需要保留原数据的，比如

            const newStu = stu.map(it => ({ ...it, result: getGrade(it.fenshu) }));

            另一种是直接更新原数据的

            stu.forEach(it => it.result = getGrade(it.fenshu));

            上面的方法可以用于 Vue 等框架。如果是自己构建页面元素，那除了可以先准备数据之外，也可以在构建页面元素的同时，直接调用你的函数来加一列数据（多个 TD 而已）

            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题