最近在使用 ajax 技术将返回的 JSON 数据添加到表格中,代码比较简单,可以轻松实现。
// 定义表格数据格式 var tblData = [ { id: 1,name: 'John',age: 25 },{ id: 2,name: 'Mary',age: 30 } ]; // 将表格数据显示在页面上 function displayTable() { var tblBody = document.getElementById('tblBody'); tblBody.innerHTML = ''; for (var i = 0; i ' + tblData[i].id + '' + tblData[i].name + ' ' + tblData[i].age + ' '; tblBody.appendChild(row); } } // 使用 ajax 获取 JSON 数据并添加到表格 function getJSONData() { var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { var jsonData = JSON.parse(this.responseText); tblData.push(jsonData); displayTable(); } }; xhr.open('GET','data.json',true); xhr.send(); }
可以看到,在使用 ajax 获取 JSON 数据后,我们只需要将获取到的数据 push 到 tblData 数组中,最后再调用 displayTable 函数即可将数据显示在表格中。
当然,在实际应用中可能会存在很多不同的情况,需要根据实际情况进行修改和优化。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。