web-dev-qa-db-ja.com

HTMLテーブルデータをjQueryでJSONオブジェクトに変換する

値のHTMLテーブルをjQueryで操作するニースJSONオブジェクトに変換する方法を知っている人はいますか？

jqueryhtmljsonhtml-table
20
Jimmy

HTMLテーブル？たとえば、すべての_<td>_の内容は2次元配列ですか？

_var tbl = $('table#whatever tr').map(function() {
  return $(this).find('td').map(function() {
    return $(this).html();
  }).get();
}).get();
_

次に、$。json（または必要なライブラリ）を使用してJSON文字列に変換します。

edit—ネイティブを使用するように書き直されました（ shim here ）配列プロトタイプの.map()：

_var tbl = $('table#whatever tr').get().map(function(row) {
  return $(row).find('td').get().map(function(cell) {
    return $(cell).html();
  });
});
_

JQuery .map()関数には、返された配列を結果配列にフラット化する「機能」があります。つまり、コールバック関数がそれ自体が配列である値を返す場合、その返された配列の代わりに.map() result、その要素はそれぞれ結果に追加されます。

mightは、元のjQueryバージョンを使用し、返された値の周りに余分な配列をラップするだけです。

33
Pointy

次のような意味ですか？

与えられた：

A1 B1 C1 ...
A2 B2 C2 ...
...

必要なもの：

{"1": ["A1", "B1", "C1", ...], 
 "2": ["A2", "B2", "C2", ...], ...}

したがって、後続の「、」なしで有効なJSON-String関数を作成する次の関数を使用します。

function html2json() {
   var json = '{';
   var otArr = [];
   var tbl2 = $('#dest_table tr').each(function(i) {        
      x = $(this).children();
      var itArr = [];
      x.each(function() {
         itArr.Push('"' + $(this).text() + '"');
      });
      otArr.Push('"' + i + '": [' + itArr.join(',') + ']');
   })
   json += otArr.join(",") + '}'

   return json;
}
20
John Rumpel

列を無視し、値をオーバーライドし、ネストされたテーブルと混同しない機能を除いて、同じことが必要でした。私はjQueryプラグインのテーブルツーjsonを書くことになりました：

https://github.com/lightswitch05/table-to-json

必要なことは、jQueryを使用してテーブルを選択し、プラグインを呼び出すことだけです。

var table = $('#example-table').tableToJSON();

これが実際に動作するデモです：

http://jsfiddle.net/Crw2C/173/

16
lightswitch05