aktueller Standort: Heim > Herunterladen > JS-Effekte > jQuery特效 > jQuery的JSON动态获取表格数据代码
jQuery的JSON动态获取表格数据代码
Klassifizieren: JS-Effekte / jQuery特效 | Veröffentlichkeitsdatum: 2018-01-25 | Besuche: 1595 |
Herunterladen: 57 |
Neueste Downloads
Fantasy-Aquarium
Girls Frontline
Flügel der Sterne
Kleine Blumenfee, Feenparadies
Restaurant Cute Story
Shanhe Reiseerkundung
Liebe und Produzent
Das stärkste Gehirn 3
Odd Dust: Damila
Junge Reise in den Westen 2
24 StundenBestenliste lesen
- 1 Warum führt die mehrmalige Verwendung von „mysqli_fetch_array()“ zu Problemen mit Ergebnissätzen?
- 2 dialerres.dll - Was ist dialerres.dll?
- 3 dlcjdr5c.dll - Was ist dlcjdr5c.dll?
- 4 Einführung in das Veröffentlichungsdatum des WAND-Projekts
- 5 Warum erhalte ich in Go „Unerwartetes Semikolon oder Newline Before Else“?
- 6 dlcres0804.dll - Was ist dlcres0804.dll?
- 7 Wie erkennt man grüne Objekte in Bildern mit OpenCV: Eine Schritt-für-Schritt-Anleitung unter Verwendung des HSV-Farbraums?
- 8 Wie kann ich die Ausrichtung des Ansichtsfensters erkennen und handhaben, um eine optimale Seitenanzeige auf Mobilgeräten zu gewährleisten?
- 9 Welche Build-Systeme sind mit der Programmiersprache Go kompatibel?
- 10 Öffnen oder schließen: Wann sollten Sie Ihre Datenbankverbindung verwalten?
- 11 dlbkdr5c.dll - Was ist dlbkdr5c.dll?
- 12 Wie erstelle ich gespeicherte Prozeduren in phpMyAdmin, ohne das Trennzeichen zu ändern?
- 13 Warum erhalte ich beim Parsen der Serpwow-API-Antwort einen Schnittstellenkonvertierungsfehler?
- 14 djpeta.exe - Was ist djpeta.exe?
- 15 Kann ich die von „System.out.println()“ in Java generierte Ausgabe löschen?
Neueste Tutorials
-
- 国外Web开发全栈课程全集
- 1665 2024-04-24
-
- Go语言实战之 GraphQL
- 1942 2024-04-19
-
- 550W粉丝大佬手把手从零学JavaScript
- 3361 2024-04-18
-
- python大神Mosh,零基础小白6小时完全入门
- 2891 2024-04-10
-
- MySQL 初学入门(mosh老师)
- 1762 2024-04-07
-
- Mock.js | Axios.js | Json | Ajax--十天精品课堂
- 2577 2024-03-29
/*双击展开关闭*/
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++;
});
});
jQuery JSON动态获取表格数据代码是一款jQuery函数调用json表格动态获取数据,表格全部折叠,全部关闭,双击表格行折叠关闭表格。
注:由于服务器不支持JSON,所以会出现无数据,下载压缩包自行搭建!