HTML テーブル データを Json 形式に変換するサンプル コード

HTML テーブル データを Json 形式に変換するサンプル コード
<table>テーブルデータをJSON形式に変換するJavaScript関数は次のとおりです。

コードをコピー
コードは次のとおりです。

<スクリプト>
var keysArr = 新しい配列("key0", "key1", "key2");
function TableToJson(tableid) { //tableidは変換したいテーブルの名前、例えば「example」のような文字列です
var rows = document.getElementById(tableid).rows.length; // 行数を取得する(thead を含む)
var colums = document.getElementById(tableid).rows[0].cells.length; //列の数を取得する
var json = "[";
var tdValue;
for (var i = 1; i < rows; i++) { //各行
json + = "{";
(var j = 0; j < 列; j++) {
tdName = keysArr[j]; //Jsonデータのキー
json += "\""; //二重引用符を追加
json += tdName;
json + = "\"";
json + = ":";
tdValue = document.getElementById(tableid).rows[i].cells[j].innerHTML; //Jsonデータの値
if (j === 1){//最初の列は日付形式であり、JSONの要件に従って次のように追加する必要があります。
tdValue = "\/Date(" + tdValue + ")\/";
}
json + = "\"";
json += tdValue;
json + = "\"";
json + = ",";
}
json = json.substring(0, json.length - 1);
json + = "}";
json + = ",";
}
json = json.substring(0, json.length - 1);
json + = "]";
json を返します。
}
</スクリプト>

<<:  Vue ネットワーク リクエスト スキーム ネイティブ ネットワーク リクエストと js ネットワーク リクエスト ライブラリ

>>:  ウェブフロントエンドエンジニアにおすすめのヒント

推薦する

クロスブラウザローカルストレージⅠ

原文: http://www.planabc.net/2008/08/05/userdata_beh...

Win7x64でのMySQL 5.7.18解凍版のインストール方法

関連記事: Win7 x64 に解凍版の mysql 5.7.18 winx64 をインストールする...

Mysqlトランザクション処理の詳細な説明

1. MySQLのトランザクションの概念MySQL トランザクションは主に、操作量が多く複雑度の高い...

MySQL の繰り返し読み取りレベルでファントム読み取りを解決できますか?

導入データベース理論についてさらに学んでいくうちに、さまざまな分離レベルによって起こり得る問題につい...

HTML の div と span の違い (共通点と相違点)

共通点: DIV タグと SPAN タグは、コンテンツ全体を非表示にしたり、コンテンツ全体を移動した...

Tomcat メモリ オーバーフロー問題の解決経験

少し前に、製品バージョンをテスト用にテスターに​​提出したのですが、テスト結果はまったく予想外のもの...

ウェブページの HTML コード: スクロールテキストの作成

このセクションでは、Web ページ内のテキストをスクロールしたり、スクロール プロパティを制御できる...

vue-tableは追加と削除を実装します

この記事では、vue-table の追加と削除の具体的なコードを参考までに紹介します。具体的な内容は...

vscode で console.log を書く 2 つの簡単な方法の詳細な説明

(I) 方法 1: 事前にスクリプト タグ内に直接定義します。この HTML ファイルにのみ適用され...

Dockerとイメージの操作方法

ミラーを探すDocker Hubのウェブサイトからイメージを検索できます。Docker Hubのウェ...

ウェブサイトのビジュアルデザインの重要なポイント

手工芸デザインからグラフィックデザイン、そしてウェブデザインまで、デザインの原則は同じままですが、私...

MYSQL メタデータ ロック (MDL ロック) の理論とロック タイプ テスト

目次MYSQL メタデータ ロック (MDL ロック) 学習理論とロック タイプ テスト1. 予備的...

CSS 動的読み込みバー効果のサンプルコード

CSS変数の知識を使って、追加したコードとコメントを直接投稿します <!DOCTYPE htm...

MySQL 5.7.17 無料インストールバージョンの設定方法グラフィックチュートリアル (Windows10)

1. 概要ネットでいろいろ検索してみたところ、Linux システム向けではなく、現在の新しいバージ...

Vue3 非同期データ読み込みコンポーネントサスペンスの使い方

目次序文コンポーネントの作成要約する序文Vue3 には多くの注目すべき機能が追加されましたが、サスペ...