jQuery_json创建表格

痛定思痛。 2022-05-21 00:17 245阅读 0赞

解析json动态生成表格

HTML结构：

<table>
         <thead>
             <tr>
               <td>学生</td>
               <td>学号</td>
               <td>成绩</td>
             </tr>
        </thead>
        <tbody id="J_tbody">
        </tbody>
       </table>

CSS：

<style> table{ //消除table边框与td的空隙 border-collapse: collapse; border-spacing: 0; border:1px solid #CCC; } tr,td{ border:1px solid #CCC; } </style>

JS:

<script> $(document).ready(function(){ var data =[{ 'name':'ww', 'xuehao':'1305020124', 'score':'94' },{ 'name':'qianqian', 'xuehao':'1305020123', 'score':'86' },{ 'name':'peipei', 'xuehao':'1305020130', 'score': '79' }]; // 第一种方法 var str = ''; for (var i = 0; i < data.length; i++) { var team = data[i]; str += '<tr>'; str += '<td>' + team.name + '</td>'; str += '<td>' + team.xuehao + '</td>'; str += '<td>' + team.score + '</td>'; str += '</tr>' } $('#J_tbody').html(str); // 第二种方法 for (var i = 0; i < data.length; i++) { var team = $('<tr></tr>'); team.append('<td>' + data[i].name + '</td>'); team.append('<td>' + data[i].xuehao + '</td>'); team.append('<td>' + data[i].score + '</td>'); $('#J_tbody').append(team); } }) </script>

效果：  
![这里写图片描述][70]  
不用Datatable，简单的表格如何解析。如上。

[70]: /images/20220521/78ed9ea5ce1145be8d0813dc5ed544fb.png

发表评论取消回复

表情：

评论列表（有 0 条评论，245人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript（二）——创建表格

<!DOCTYPE html> <html> <head> <title></title> <

Bertha 。/ 2023年06月26日 12:12/ 0 赞/ 6 阅读

相关利用js动态创建表格

利用js动态创建表格（appendChild实现覆盖式创建）在用JS创建表格时如果用 document.write()的话会将页面全部覆盖，只能做到输入一次的效果。但是

末蓝、/ 2023年06月07日 10:48/ 0 赞/ 25 阅读

相关 mysql命令行创建表格出错_MYSQL 创建表格语句哪里出错了？

sqlstr="CREATETABLEClient\_info";sqlstr+="(";sqlstr+="user\_idPRIMARYKEY\[user\_id\],";s

小鱼儿/ 2023年01月12日 07:49/ 0 赞/ 114 阅读

相关动态创建elementUI表格合计行

elementui加上合计行非常简单，在表格组件上，将show-summary设置为true就会在表格尾部展示合计行。定义自己的合计逻辑，使用summary-method并传入

淡淡的烟草味﹌/ 2022年12月25日 09:59/ 0 赞/ 340 阅读

相关 Typora编辑器“表格”创建

Typora编辑器“表格”创建 > Typora 的表格创建，比 Markdown 语法简单 Markdown 语法： 1|2|3 ---|--

川长思鸟来/ 2022年11月27日 10:19/ 0 赞/ 354 阅读

相关 html怎么用js创建表格,创建表格.html

function MyTable(rows,cols)\{ this.createTable = function()\{ this.table = document.cr

旧城等待，/ 2022年10月08日 00:40/ 0 赞/ 240 阅读

相关 js创建表格

第一部分： <table border="1" cellspacing="0" cellpadding="0" width="800" id="tab">

ゝ一世哀愁。/ 2022年06月16日 00:07/ 0 赞/ 227 阅读

相关 jQuery_json创建表格

解析json动态生成表格 HTML结构： <table> <thead> <tr> <td

痛定思痛。/ 2022年05月21日 00:17/ 0 赞/ 246 阅读

相关表格的创建于删除

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

谁践踏了优雅/ 2022年05月14日 10:48/ 0 赞/ 238 阅读

相关 markdown 创建表格

日常我们在写简书的时候总会有一些表格要写，我正常用的是markdown编辑器写简书。这里介绍两种方法写markdown的表格一、极简方式 name | 价格 |

小灰灰/ 2021年07月28日 15:59/ 0 赞/ 574 阅读