javascript - 如何为表格插入json数据？
我想通过js完成对表格进行插入数据。该如何处理。例如有个json数据，格式如下：
var stu = [ { "name": "张三", "sex": "男", "fenshu": "100" }, { "name": "李四", "sex": "男", "fenshu": "60" }, { "name": "王五", "sex": "男", "fenshu": "90" } ];最终表格是三行4列，第4列数据是根据每行第3列的数据调用一个方法，然后输出到该行中的第四列中。
共有4个答案
多数情况下，只需要直接更新数据，然后就可以使用更新后的数据来进行处理的。当然这里也分两种情况，一种是需要保留原数据的，比如
const newStu = stu.map(it => ({ ...it, result: getGrade(it.fenshu) }));另一种是直接更新原数据的
stu.forEach(it => it.result = getGrade(it.fenshu));上面的方法可以用于 Vue 等框架。如果是自己构建页面元素，那除了可以先准备数据之外，也可以在构建页面元素的同时，直接调用你的函数来加一列数据（多个 TD 而已）
<!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>
试一下这个库 xlsx
先用 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>-
问题内容： 我有一个带有页眉和页脚的HTML表： 我正在尝试添加以下内容： 但该行已添加到该部分中。 我该如何插入？ 问题答案： 如果您想在中添加行，请获取对其的引用，然后在其中添加。 工作演示在这里。另外，您可以在此处查看文档。
-
问题内容： 嗨，我正在尝试将json数组插入我的MySQL数据库。我从我的iPhone传递数据，我已经将数据转换为json格式，并使用未插入服务器的url将数据传递到服务器。 这是我的json数据。 [{“ name”：“ 0”，“ phone”：“ dsf”，“ city”：“ sdfsdf”，“ email”：“ dsf”}，{“ name”：“ 13123123”，“ phone”：“ sd
-
问题内容： 我想将变量插入到我的数据库中，其中一些是php可以正常工作，但是问题是javascript变量，它不起作用。我对此很陌生，任何帮助都将很好。 这是我的第一个问题，对不起，如果我把代码块弄错了。 应该发生的是，当我按下按钮时，它将时间保存在变量中，第二次按下按钮时，它将时间保存在另一个变量中，现在我希望将这些时间变量保存在数据库中。 谢谢你。 问题答案： 阿贾克斯工作： 谢谢你的建议。
-
将中的每行复制到. Microsoft SQL Server Management Studio2012中是否有从表创建插入SQL的选项？或者还有其他选择吗？
-
问题内容： 我有这种格式的json数组： 现在，我想解析并以表格格式在Javascript或jQuery中显示它。该表有四列，每一列指示此数组中每个元素的每个属性。该表的第一行是这四个键的名称。其他行是这些键的值。 我不知道如何编写JavaScript代码来实现此功能。你能帮我吗？ 问题答案： 演示
-
Word显示图像有问题。我真的不知道问题出在哪里