9

次のようなhtmlテーブルからデータを抽出したい

<table>
    <tr>
        <th> Header1 </th>
        <th> Header2 </th>
        <th> Header3 </th>
    </tr>
    <tr>
        <td> Value 1,1 </td>
        <td> Value 2,1 </td>
        <td> Value 3,1 </td>
    </tr>

    ... rows ...

</table>

配列を取得します。

  • ヘッダーの配列
  • 列値の 2 次元配列 (または各列の配列)

    jQueryを使用してこれを行うにはどうすればよいですか?

    チャートをレンダリングするために使用したいので、シリアライズしたり、JSON オブジェクトに入れたりする必要はありません。

    関連する一般的な設計上の質問:

    現時点で私は次のようなものを持っています

    1. ajax query returns html table
2. use jQuery to get values from html table
3. render chart

    ajax クエリから JSON オブジェクトを返して、そこからテーブルとチャートをレンダリングする方が理にかなっていますか?

    • 4

    9 に答える 9

    16

    デモ更新http://jsfiddle.net/ish1301/cnsnk/

    var header = Array();

$("table tr th").each(function(i, v){
        header[i] = $(this).text();
})

alert(header);

var data = Array();

$("table tr").each(function(i, v){
    data[i] = Array();
    $(this).children('td').each(function(ii, vv){
        data[i][ii] = $(this).text();
    }); 
})

alert(data);
    于 2010-12-03T21:34:29.407 に答える
    15

    このようなものですか？

    $(function() {

  var headers = $("span",$("#tblVersions")).map(function() { 
    return this.innerHTML;
  }).get();

  var rows = $("tbody tr",$("#tblVersions")).map(function() { 
    return [$("td:eq(0) input:checkbox:checked",this).map(function() { 
      return this.innerHTML;     
    }).get()];
  }).get();

  alert(rows);
});
    于 2010-12-03T21:31:27.470 に答える
    3

    それを行うさらに別の方法

    var headers = jQuery('th').map(function(i,e) { return e.innerHTML;}).get();
var datas = []
jQuery.each(jQuery('tr:gt(0)'), function(i,e ) {
   datas.push(jQuery('td', e).map(function(i,e) {
                                     return e.innerHTML; 
                                  }).get()
             );
});
    于 2010-12-03T21:55:07.500 に答える
    1

    これは、「each」内のマップの代わりに再帰マップを使用する Jerome Wagner の回答の修正です。

    http://jsbin.com/oveva3/383/edit

      var headers = $("th",$("#meme")).map(function() { 
    return this.innerHTML;
  }).get();

  var rows = $("tbody tr",$("#meme")).map(function() { 
    return [$("td",this).map(function() { 
      return this.innerHTML;     
    }).get()];
  }).get();
    于 2013-01-22T01:29:11.520 に答える
    1

    次のようなもの：

    var thArray = new Array();
var contentArray = new Array();

$('th').each(function(index) {
  thArray[index] =    $(this).html();
})


$('tr').each(function(indexParent) {
  contentArray['row'+indexParent] = new Array();
    $(this).children().each(function(indexChild) {
      contentArray['row'+indexParent]['col'+indexChild] = $(this).html();
    });
});

    これによりthArray、見出しの配列であり、contentArray行と列を含む 2 次元配列である 2 つの配列が得られます。 contentArray['row1']['col0']「値 1,1」を返します。

    実際には、contentArray にはth's も含まれています... 'row0' を参照

    于 2010-12-03T21:30:18.673 に答える
    1

    ajax クエリから JSON オブジェクトを返して、そこからテーブルとチャートをレンダリングする方が理にかなっていますか?

    そのとおり。AJAX リクエストに応じて JSON を返すと、jQuery テンプレートなどを使用してテーブルをレンダリングし、同じ基本データを使用してチャートを生成することもできます。

    于 2010-12-03T21:41:05.533 に答える
    1

    私はここで同じことをいじっていますが、すべてのテーブルを繰り返し処理し、ヘッダーと本文の配列を各テーブルのプロパティに書き込むことを好むので、元の回答に対する私の変更は次のとおりです。

    $(function() {
$("table").each(function(){
  var $table = $(this),
      $headerCells = $("thead th", $(this)),
      $rows = $("tbody tr", $(this));
  var headers = [],
      rows = [];


$headerCells.each(function(k,v) {
   headers[headers.length] = $(this).text();
  $table.prop("headAry", headers);
});

$rows.each(function(row,v) {
  $(this).find("td").each(function(cell,v) {
    if (typeof rows[cell] === 'undefined') rows[cell] = [];
    rows[cell][row] = $(this).text();
    $table.prop("bodAry", rows);
  });
});
console.log($(this).prop('headAry'));
console.log($(this).prop('bodAry'));  
});
});

    JSビン

    于 2013-03-19T23:00:26.130 に答える
    0

    ajax呼び出しからjson配列を取得し、そこからテーブル/チャートを生成する方が理にかなっていると思います。jqueryテンプレートでは、これはまったく難しいことではありません。

    于 2010-12-03T21:24:00.870 に答える