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 ネットワーク リクエスト ライブラリ

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

推薦する

DockerはRedisをインストールし、操作用のビジュアルクライアントを導入します

1 はじめにRedis 、 ANSI C言語で開発されたKey-Valueベースの高性能NoSQLデ...

モバイルデバイスでのフリーズ問題に対する CSS3 ソリューション (アニメーション パフォーマンスの最適化)

1. CSS、jQuery、Canvasを使用してアニメーションを作成する1. キャンバス利点: ...

Kubernetes (k8s) 入門

Kubernetes は面白そうだったので(ギリシャ人なら名前に問題があると思うでしょうが)、ずっと...

mysql8.0.11 winx64 インストールと設定のチュートリアル

mysql 8.0.11 winx64のインストールチュートリアルは以下のように記録され、みんなと共...

フロントエンド開発に必須:推奨されるブラウザ互換性テストツール 12 選

フロントエンド開発者にとって、さまざまな主要ブラウザのさまざまなバージョンでコードが適切に動作するこ...

インタラクションデザインと心理学の驚くべきつながり18選

デザイナーは心理学を理解する必要があるデザイナーが知るべき心理学という本は非常に興味深いです。まず、...

イメージの起動時にdocker runまたはdocker restartが自動的に終了する問題を解決します

コマンドを実行します: docker run --name centos8 -d centos /b...

Vue ブラウザログアウトの実装例

目次1. beforeunload イベント2. アンロードイベント3. ソースコードプロジェクトの...

HTTP ステータス コード

このステータス コードは、リクエストのステータスに関する情報を提供し、サイトとリクエストされたページ...

星のフラッシュ効果を実現するjs

この記事の例では、スターフラッシュ効果を実現するためのjsの具体的なコードを参考までに共有しています...

Vueカスケードドロップダウンボックスの設計と実装

目次1. データベース設計2. フロントエンドページ3. 完全なデモフロントエンド開発では、カスケー...

jsのイベントオブジェクトを深く理解しましょう

JS でよく使用されるイベントは次の通りです。ページイベント: load;フォーカス イベント: フ...

初心者のためのMySQL外部キーの設定方法

目次外部キーの役割mysql 外部キー設定方法要約する外部キーの役割データの一貫性、整合性を維持し、...

テキストの折り畳み特殊効果を実現する HTML+CSS の例

この記事では、主に HTML + CSS を使用してテキストの折りたたみ特殊効果を実現する例を紹介し...

CSSでスペースを処理する方法

1. 宇宙のルールHTML コード内の空白は通常、ブラウザによって無視されます。 <p>...