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

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

分类: js特效 / jQuery特效	发布时间: 2018-01-25	访问量: 1851
下载量: 59

点击下载预览效果

更多>

最新下载

iPicker多级联动城市选择组件

jQuery iPicker城市选择插件，利用json动态调用城市地区数据，支持多级联动城市选择，设置获取值选择结果。这是一款简单快速的对 “省市区” 城市选择代码。ps：使用ajax本地要在localhost才能正常访问。

0 2026-01-27

CSS3实现3D图片翻转洗牌特效

CSS3实现3D图片翻转洗牌特效是一款鼠标悬停到缩略图片3D翻转切换显示代码，支持触摸设备使用。

0 2026-01-27

vue.js表单密码强度验证代码

vue.js表单密码强度验证代码是一款适用于手机注册表单输入密码强度验证特效。

0 2026-01-27

React框架制作人物介绍切换特效

React框架制作人物介绍切换特效是一款圆形的虚线旋转和人物介绍标签文字结合，点击按钮切换下一张图片人物介绍效果。

0 2026-01-27

jQuery手机登录注册表单代码

jQuery手机登录注册表单代码是一款基于jQuery+HTML5实现的蓝色风格手机端表单特效。

0 2026-01-27

jquery图片移位效果

jquery图片移位效果是一款基于html5+css3实现的图片随机移位排列效果。本作品由【站长素材】收集整理，转载请注明出处！

0 2026-01-27

24小时阅读排行榜

更多>

最新教程

最新Python教程从入门到精通

Node.js 教程

16231 2025-08-28
CSS3 教程

1546826 2025-08-27
Rust 教程

23369 2025-08-27
Vue 教程

25824 2025-08-22
PostgreSQL 教程

22307 2025-08-21
Git 教程

9282 2025-08-21

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'>未结费     " + unsettled + "</td></tr>";
$("#smallTable" + k).append(totalTrObj);
console.log(priceSum);
console.log("未结费" + unsettled);
k++;
});
});