当前位置: 首页  >  下载站  >  js特效  >  jQuery特效  >  jQuery的JSON动态获取表格数据代码

jQuery的JSON动态获取表格数据代码

jQuery的JSON动态获取表格数据代码

jQuery的JSON动态获取表格数据代码
分类:   js特效 / jQuery特效 发布时间:  2018-01-25 访问量:  1840
下载量:  59
点击下载 预览效果
更多>

最新下载

jQuery垂直传送带图片切换

jQuery垂直传送带图片切换是一款根据窗口大小自动调整图片尺寸进行垂直滚动切换特效。本作品由【站长素材】收集整理,转载请注明出处!
0 2026-01-22

jQuery手机注册表单获取验证码代码

jQuery手机注册表单获取验证码代码是一款输入手机号码表单验证,60秒倒计时发送验证码完成注册表单代码。
0 2026-01-22

jQuery空格键添加a标签

jQuery空格键添加a标签是一款动态添加多个标签,按空格就显示在上面,表单添加html标签元素。
0 2026-01-22

jQuery创意输入框表单提交特效

jQuery创意输入框表单提交特效是一款卡通恐怖主题的邮箱输入框验证,表单提交动画特效。
0 2026-01-22

jQuery图片查看器代码

jQuery图片查看器代码是利用viewer.min.js以及swiper结合实现轮播图查看大图,实现图片轮播的效果。
0 2026-01-22

jQuery图片自动轮播切换展示特效

jQuery图片自动轮播切换展示特效是一款酷炫的带文字说明焦点图轮换代码。
0 2026-01-22
更多>

最新教程

jQuery的JSON动态获取表格数据代码

/*双击展开关闭*/
function dbClick(obj) {
if($(obj).next().is(":hidden")) {
$(obj).next().show();
} else {
$(obj).next().hide();
}
};
$(function() {
$("#mainTable thead").next().empty();
var k = 0;
$.getJSON("revenue.json", function(data) {
$.each(data, function(mainIndex, mainTable) {
/*收入单位*/
var mainTrObj = "<tr class='mainTr warning' ondblclick='dbClick(this)'><td>" + mainTable.incomeUnit + "</td><td>" + mainTable.firm + "</td><td>" + mainTable.number + "</td><td>" + mainTable.instructionType + "</td><td>" + mainTable.dept + "</td><td>" + mainTable.totalPrice + "</td></tr>";
$("#mainTable").append(mainTrObj);
/*支出单位表头*/
var haveChild = data[k].child.length;
if(haveChild == 0) {
var nullHead = "<tr><td colspan='5' align='center'>暂无数据</td></tr>";
$("#mainTable").append(nullHead);
} else {
var smallTit = "<tr><td colspan='6'><table id='smallTable" + k + "' class='table-condensed table smallTable'><tr id='smallTr" + k + "' class='success'><td>支出结算单位</td><td>数量</td><td>支出价格</td><td>费用类型</td></tr></table></td></tr>";
$("#mainTable").append(smallTit);
}
/*支出单位遍历*/
var numnerSum = 0;
var priceSum = 0;
var unsettled = 0;
var child = data[k].child;
for(var j = 0; j < haveChild; j++) {
numnerSum = numnerSum + parseInt(child[j].number);
priceSum = priceSum + parseFloat(child[j].price);
priceSum = Math.round(priceSum * 100) / 100;
unsettled = parseFloat(mainTable.totalPrice) - priceSum;
unsettled = Math.round(unsettled * 100) / 100;
var smallTrObj = "<tr class='smallTr'><td>" + child[j].expendUnit + "</td><td>" + child[j].number + "</td><td>" + child[j].price + "</td><td colspan='2'>" + child[j].type + "</td></tr>";
$("#smallTr" + k).after(smallTrObj);
/*计算数量、价格、未结费*/
}
/*小计行*/
var totalTrObj = "<tr class='danger'><td>小计</td><td>" + numnerSum + "</td><td>" + priceSum + "</td><td align='center'>未结费&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;" + unsettled + "</td></tr>";
$("#smallTable" + k).append(totalTrObj);
console.log(priceSum);
console.log("未结费" + unsettled);
k++;
});
});

jQuery JSON动态获取表格数据代码是一款jQuery函数调用json表格动态获取数据,表格全部折叠,全部关闭,双击表格行折叠关闭表格。

注:由于服务器不支持JSON,所以会出现无数据,下载压缩包自行搭建!
本站所有资源都是由网友投搞发布,或转载各大下载站,请自行检测软件的完整性!本站所有资源仅供学习与参考,请勿用于商业用途,否则产生的一切后果将由您自己承担!如有侵权请联系我们删除下架,联系方式:admin@php.cn

相关推荐

页码可跳转的jQuery动态数据表格分页插件

页码可跳转的jQuery动态数据表格分页插件
html5特效
2018-06-01

jQuery的JSON动态获取表格数据代码

jQuery的JSON动态获取表格数据代码
jQuery特效
2018-01-25

jQuery-Paging动态分页数据获取插件

jQuery-Paging动态分页数据获取插件是一款动态数据获取并分页代码,分页切换时还带有好看的弹性动画效果。
其它特效
2017-12-13

jQuery JSON动态获取表格数据代码

jQuery JSON动态获取表格数据代码
jQuery特效
2017-08-11

jQuery动态分页数据获取代码

jQuery动态分页数据获取代码
分页代码
2017-08-11

jQuery不刷新分页动态数据表格代码

jQuery不刷新分页动态数据表格代码是一款实用的jquery表格插件。
分页代码
2017-06-01

热门下载

jQuery左侧下拉导航菜单后台框架模板

jQuery制作左侧垂直下拉导航栏,内嵌iframe导航菜单后台页面模板。
菜单导航
2021-02-04

科技感的数字时钟vue特效

时钟,html5时钟,vue
时间日期
2021-06-17

炫酷的光标丝带鼠标移动特效

基于canvas制作炫酷的鼠标移动线条动画,丝带光标动画特效。
鼠标特效
2021-02-22

canvas音谱可视化mp3音乐播放器代码

html5 canvas通过AudioContext对获取audio标签播放的音域和音高,调用js绘制相应高度的矩形或线条。
播放器特效
2021-03-10

创意的时间轮盘时钟特效

js css3制作全屏的轮盘时钟,时间轮盘旋转动画特效。
时间日期
2021-01-20

迷你音乐播放器vue特效

html5 vue制作多功能mp3音乐播放器,带专辑图片,点赞收藏,上一首/下一首/开始/暂停切换,社交转载,播放进度条等功能演示特效。
播放器特效
2021-02-18
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号