首頁 JS特效 jQuery特效 jQuery的JSON動態取得表格資料代碼

jQuery的JSON動態取得表格資料代碼

jQuery的JSON動態取得表格資料代碼

jQuery的JSON動態取得表格資料代碼

/*左側展開關閉*/
函數 dbClick(obj) {
if($(obj).next().is(":hidden")) {
$(obj).next().show();
} 否則{
$(obj).next().hide();
}
};
$(函數() {
$("#mainTable thead").next().empty();
var k = 0;
$.getJSON("revenue.json", function(data) {
$.each(資料, 函數(mainIndex, mainTable) {
/*收入單位*/
var mainTrObj = "" + mainTable. RevenueUnit + "</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);
} 否則{
var SmallTit = "<表 id='smallTable" + k + "' class='表格壓縮表smallTable'><td>支出結算單位</td><td>數量</td><td>支出價格</td><td>費用類型</td></td><td>費用類型</td>< /tr></table></td></tr>";
$("#mainTable").append(smallTit);
}
/*支出單位遊覽*/
var numnerSum = 0;
var 價格總和 = 0;
var 未解 = 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;
未解決= parseFloat(mainTable.totalPrice)-priceSum;
未解決 = Math.round(未解決 * 100) / 100;
var SmallTrObj = "" + 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 = "小計" + numnerSum + "</td><td>" +priceSum + "</td><tdalign='center'>未結費     " + 未解決 + "</td></tr>";
$("#smallTable" + k).append(totalTrObj);
console.log(priceSum);
console.log("未結帳" + 未結算);
k++;
});
});

jQuery JSON動態取得表格資料程式碼是一款jQuery函數呼叫json表格動態取得數據,表格全部折疊,全部關閉,表格行折疊關閉表格。

註:由於伺服器不支援JSON,所以會出現無數據,下載壓縮包自行搭建!
免責聲明

本站所有資源皆由網友貢獻或各大下載網站轉載。請自行檢查軟體的完整性!本站所有資源僅供學習參考。請不要將它們用於商業目的。否則,一切後果都由您負責!如有侵權,請聯絡我們刪除。聯絡方式:admin@php.cn

相關文章

HTML5超逼真下雪場景效果 HTML5超逼真下雪場景效果

18 Jan 2017

這是一款以jquery為基礎的超逼真下雪場景特效。此特效使用jquery程式碼來動態外掛程式html5 canvas元素,然後在canvas中製作下雪特效。

jQuery與CSS3超炫漢堡變形動畫特效 jQuery與CSS3超炫漢堡變形動畫特效

18 Jan 2017

這是一款使用jQuery和CSS3來製作的酷炫漢堡包變形動畫特效。此特效透過jQuery來附加按鈕事件,並透過CSS3 transform和animation來製作動畫特效。

jquery打字特效停止回刪 jquery打字特效停止回刪

23 May 2023

隨著網路的普及,打字特效的應用越來越廣泛,jquery打字特效也成為了許多網站開發人員的首選。然而,在實現這種特效的過程中,細節問題常常會影響使用者體驗,例如打字特效的回刪問題。本文將介紹如何利用jquery打字特效停止回刪,提升使用者的瀏覽體驗。 jquery打字特效的實作可以使用現成的插件,如typed.js和jQuery.Typewriter等。這些插件都是基於jquery的

jQuery動畫特效實例教學_jquery jQuery動畫特效實例教學_jquery

16 May 2016

這篇文章主要介紹了jQuery動畫特效,詳細敘述了jQuery動畫特效的實現方法,非常實用,需要的朋友可以參考下

漂亮的jquery提示效果(仿騰訊彈出層)_jquery 漂亮的jquery提示效果(仿騰訊彈出層)_jquery

16 May 2016

jquery提示效果很多,本文也提供一個超漂亮的仿騰訊彈出層效果,熱愛特效的你可千萬不要錯過了啊,希望本文提供的案例對你學習jquery特效有所幫助

jQuery實現玻璃流光質感的手風琴特效_jquery jQuery實現玻璃流光質感的手風琴特效_jquery

16 May 2016

這篇文章主要介紹了jQuery實現玻璃流光質感的手風琴特效,是一款基於jQuery CSS3實現手風琴特效,希望你可以喜歡。

jQuery動畫與特效詳解 jQuery動畫與特效詳解

28 Nov 2017

jquery中我們最需要用的除了異步,就是動畫和特效了吧,要想給用戶更好的體驗jquery是最好的選擇,就讓我們一起來看看jquery的動畫、特效的詳解吧

jquery手風琴特效步驟詳解 jquery手風琴特效步驟詳解

24 Apr 2018

這次帶給大家jquery手風琴特效步驟詳解,jquery實現手風琴特效的注意事項有哪些,下面就是實戰案例,一起來看一下。

jquery實現數位滾動特效 jquery實現數位滾動特效

24 Apr 2018

這次帶給大家jquery實現數位滾動特效,jquery實現數位滾動特效的注意事項有哪些,以下就是實戰案例,一起來看一下。

See all articles See all articles

Hot Tools

jQuery2019情人節表白放煙火動畫特效

jQuery2019情人節表白放煙火動畫特效

一款抖音上很火紅的jQuery情人節表白放煙火動畫特效,適合程式設計師、科技宅用來向心愛的女孩告白,無論你選擇願意或不願意,到最後都得同意。

layui響應式動畫登入介面模板

layui響應式動畫登入介面模板

layui響應式動畫登入介面模板

520情人節表白網頁動畫特效

520情人節表白網頁動畫特效

jQuery情人節表白動畫、520表白背景動畫

酷炫的系統登入頁

酷炫的系統登入頁

酷炫的系統登入頁

HTML5卡音樂播放器-CASSETTE PLAYER

HTML5卡音樂播放器-CASSETTE PLAYER

HTML5卡音樂播放器-CASSETTE PLAYER