jQueryのJSONはテーブルデータコードを動的に取得します
/*双击展开关闭*/
関数 dbClick(obj) {
if($(obj).next().is(":hidden")) {
$(obj).next().show();
} その他 {
$(obj).next().hide();
}
};
$(function() {
$("#mainTable thead").next().empty();
var k = 0;
$.getJSON("収益.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><tdcolspan='5' align='center'>暂無数データ</td></tr>";
$("#mainTable").append(nullHead);
} その他 {
var smallTit = "<tr><tdcolspan='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 価格合計 = 0;
var unsettled = 0;
var child = data[k].child;
for(var j = 0; j < haveChild; j++) {
numnerSum = numnerSum + parseInt(child[j].number);
価格合計 = 価格合計 + parseFloat(child[j].price);
価格合計 = Math.round(価格合計 * 100) / 100;
unsettled = parseFloat(mainTable.totalPrice) - 価格合計;
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><tdcolspan='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'>未価格 " + 不安定 + "</td></tr>";
$("#smallTable" + k).append(totalTrObj);
console.log(priceSum);
console.log("未解決" + 未解決);
k++;
});
});
jQuery JSON 動的取得テーブルのデータコードは、jQuery 関数を使用して json テーブル動的にデータを取得する、テーブルがすべて折り畳まれている、すべてが折り畳まれている、二重テーブルが折り畳まれているテーブルです。
注: サービス务器が JSON をサポートしていないため、データデータが存在しません。このサイトのすべてのリソースはネチズンによって提供されたもの、または主要なダウンロード サイトによって転載されたものです。ソフトウェアの整合性をご自身で確認してください。このサイトのすべてのリソースは学習の参考のみを目的としています。商業目的で使用しないでください。そうでない場合は、すべての結果に対して責任を負うことになります。侵害がある場合は、削除するためにご連絡ください。連絡先情報: admin@php.cn
関連記事
16 May 2016
jquery の動的ページング効果が完成したので、それを共有します。この効果は Mtime.com のものと似ています。
16 May 2016
この記事では、画像カルーセル効果を作成する際の現在の要素のインデックス値を取得するための jQuery の使用方法を主に紹介します。
16 May 2016
jqueryを使用してテキストエリアの高さを調整するための実装コード。このアニメーション効果は比較的スムーズです。初心者が学ぶのに適しています。
16 May 2016
この記事では、マウス ホイールのスタイルや効果を動的に変更するための jQuery を主に紹介します。必要な方は参考にしてください。
16 May 2016
jquery は現在の年と現在の月 (0-11) を取得します。興味のある方は以下のコードを参照してください。
28 Jun 2018
この記事では、動的に追加されたタグ オブジェクトを取得する jQuery の実装を主に紹介します。ページ要素の動的追加、要素の取得、イベントの応答に関する jQuery の操作スキルが必要な場合は、以下を参照してください。
16 May 2016
この記事では、マウスのスクロールに応じて jQuery によって実装された動的メニュー効果を主に紹介します。これは、メニュー項目上でマウスをスライドさせてテキストを上下にスライドさせる効果を実現できます。これには、jQuery ページ要素スタイルの動的設定スキルが含まれます。必要な友達は以下を参照してください。
16 May 2016
この記事ではjqueryを使ったページ上の動的データのスクロール効果について紹介したいと思います。テーブルの複数の行と列のスクロール効果は、div-ul-li タグをネストすることによってのみ実現できるようです。
ホットツール Tags
Hot Tools
jQuery2019 バレンタインデー 告白 花火 アニメーション 特殊効果
Douyin で非常に人気のある jQuery バレンタインデーの告白花火アニメーション特殊効果で、プログラマーや技術オタクが愛する女の子に愛を表現するのに適しています。喜んでいるかどうかに関係なく、最終的には同意する必要があります。
Lauiui レスポンシブ アニメーション ログイン インターフェイス テンプレート
Lauiui レスポンシブ アニメーション ログイン インターフェイス テンプレート
520 バレンタインデーの告白 Web アニメーション特殊効果
jQuery バレンタインデーの告白アニメーション、520 告白背景アニメーション
クールシステムのログインページ
クールシステムのログインページ
HTML5テープミュージックプレーヤー - CASSETTE PLAYER
HTML5テープミュージックプレーヤー - CASSETTE PLAYER