jQuery_json创建表格

痛定思痛。 2022-05-21 00:17 233阅读 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 条评论，233人围观）

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

相关阅读

相关 Aspose.Words 创建表格

1 使用详解（1）StartTable() 说明：创建表格。格式：public Table StartTable(); （2）InsertCell() 说明：

小鱼儿/ 2023年10月05日 07:54/ 0 赞/ 37 阅读

相关利用js动态创建表格

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

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

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

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

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

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

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

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

相关 java删除表格_Java 创建、删除Word表格

在Word文档中，我们可以通过添加表格的方式来帮助我们更加清晰、直观地分析和展示数据。本文将介绍如何使用Free Spire.Doc for Java组件来给Word文档创建表

刺骨的言语ヽ痛彻心扉/ 2022年11月05日 03:22/ 0 赞/ 61 阅读

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

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

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

相关 js创建表格

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

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

相关 jQuery_json创建表格

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

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

相关表格的创建于删除

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

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

相关 markdown 创建表格

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

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