首页 > 其他分享 >js 遍历json格式数据到table中

js 遍历json格式数据到table中

时间:2023-08-30 09:46:29浏览次数:45  
标签:遍历 tr js json var table

前端aspx文件,js把数据显示在表格中

1.首先我们在前端页面写一个table代码。

 1                                     <table border="1" id="gystable" cellpadding="0" cellspacing="0" class="frame5">
 2                                         <thead>
 3                                             <tr style="background-color: gainsboro">
 4                                                 <td align="center" width="100px">月份</td>
 5                                                 <td align="center" width="100px">应收金额(RMB)</td>
 6 
 7                                             </tr>
 8                                         </thead>
 9 
10                                         <tbody id="ysamountlist" align="center">
11                                             <asp:Repeater ID="RepeaterGYS" runat="server">
12                                                 <ItemTemplate>
13                                                     <tr>
14                                                         <td align="center">
15                                                             <%# Eval("CheckDate","{0:yyyy-MM-dd}")%>
16                                                         </td>
17                                                         <td align="center">
18                                                             <%# Eval("Amount")%>
19                                                         </td>
20 
21                                                     </tr>
22                                                 </ItemTemplate>
23                                             </asp:Repeater>
24                                         </tbody>
25                                     </table>
26                                

2.其次在写js的位置吧获取到的json遍历

 1 //将json字符串转换为json格式
 2  var yslist = $.parseJSON(result);
 3  //遍历table
 4  $.each(yslist, function (index, item) {
 5            var $tr = $('<tr>');
 6                  $.each(item, function (name, val) {
 7                        var $td = $('<td>').html(val);
 8                         $tr.append($td);
 9               });
10             $("#ysamountlist").append($tr);
11   });

3.如图所示:

 

4.结果就是我们看到的:

本文链接:https://www.cnblogs.com/yifeixue/p/17666430.html

 备注:创作不易,如转载文章,请注明出处,谢谢!

标签:遍历,tr,js,json,var,table
From: https://www.cnblogs.com/yifeixue/p/17666430.html

相关文章

  • js base64转blob
    /**base64转换成blob数据*/base64ToBlob(dataUrl,type){vararr=dataUrl.split(',');varmime=arr[0].match(/:(.*?);/)[1]||type;//去掉url的头,并转化为bytevarbytes=window.atob(arr[1]);......
  • js 函数的保护函数 防止toString检测
    js函数的保护函数防止toString检测letcatvm={};(()=>{"usestrict";const$toString=Function.toString;constmyFunction_toString_symbol=Symbol('('.concat('',')_',(Math.random()+'').toStr......
  • JS判断变量是否存在或已定义
    前言:因需求修改了公共文件,导致引入公共文件的部分页面因未引入来源js会报错,所以需要在公共文件中增加判断变量是否存在。为了确保代码的可靠性,应该对变量的定义进行检查,从而避免代码在运行时执行错误或不可预期的错误。一、typeofif(typeofmyVar==='undefined'){//my......
  • js实现汉字中文排序
    js实现汉字中文排序的方法数组内的元素是对象,以对象某一个属性进行排序vararr=[{name:'南京',code:'09',info:{province:'江苏'}},{name:'北京',code:'01',info:{province:'北京'}},{name:'上海',code:'02&......
  • js_通过js主动触发原生事件, 以及通过js注册自定义事件并手动触发
    现实情景:在对博客园的样式进行修改时,需要对博客园的中某些DOM的绑定事件进行手动触发主动触发原生事件,以click为例constoBtn2=document.querySelector('#btn2')oBtn2.addEventListener('click',()=>{console.log('click')})constevObj=document.createEv......
  • js前端excel导出带图片(亲测可用)
    1,js-table2excelnpm包有问题,导出后一片空白 2,改写一下js-table2excel/*eslint-disable*/letidTmr;constgetExplorer=()=>{letexplorer=window.navigator.userAgent;//ieif(explorer.indexOf("MSIE")>=0){return'ie';}......
  • js 常用链接
    nodeguide:TheNode.jsEventLoop,Timers,andprocess.nextTick()vuexvue3vitevitest......
  • 【Azure App Service for Linux】NodeJS镜像应用启动失败,遇见 RangeError: Incorrect
    问题描述在AppServiceForLinux中,部署NodeJS应用,应用启动失败。报错信息为:2023-08-29T11:21:36.329731566ZRangeError:Incorrectlocaleinformationprovided2023-08-29T11:21:36.329776866ZatIntl.getCanonicalLocales(<anonymous>)2023-08-29T11:21:36.329783066ZatC......
  • jsonpath用法记录
    {"flag":1,"code":0,"msg":"成功","detail":[{"name":"重疾险","value":"1","children":[......
  • js事件移除
    1.AbortController()addEventListener()时,可以配置一个信号,用于命令式地中止/删除监听器。当相应的控制器调用.abort()时,监听器会被移除:const button = document.getElementById('button');const controller = new AbortController();const { signal } = contro......