HTML таблицы данных в массивы через jQuery

Question

Я хочу извлечь данные из таблицы 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>

и получить массивы:

Массив для заголовков

2D массив для значений столбцов (или массив для каждого столбца)

Как я могу сделать это, используя jQuery?

Мне все равно, чтобы сериализовать его или поместить его в объект JSON, потому что хочу использовать его, чтобы сделать его, чтобы сделать график.

---

Связанный Общий вопрос о дизайне:

на данный момент у меня есть что-то вроде

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

Составляет ли это больше смысла бросать объект JSON обратно из запроса Ajax, а затем оттуда отобразите стол и диаграмму?

Answer 1

Что-то так?

$(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);
});

Answer 2

Демо обновлено 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);

Answer 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()
             );
});

Answer 4

Что-то вдоль линий:

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 который представляет собой 2D массив, содержащий строки и столбцы: contentArray['row1']['col0'] Возвращает «Значение 1,1»

На самом деле, Contentarray содержит thТакже ... ссылается на «ROW0»

Answer 5

Составляет ли это больше смысла бросать объект JSON обратно из запроса Ajax, а затем оттуда отобразите стол и диаграмму?

Да, конечно. Верните JSON в ответ на ваш запрос AJAX, вы можете сделать таблицу, используя что-то вроде шаблонов jQuery, и использовать одни и те же базовые данные, чтобы также генерировать таблицу.

Answer 6

Я готовлюсь с той же здесь, но я предпочитаю итерацию через все таблицы и писать заголовок и массивы тела в свойства каждой таблицы, поэтому вот моя модификация на оригинальный ответ:

$(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'));  
});
});

Jsbin.

Answer 7

Я бы подумал, что это будет иметь больше смысла получить массив JSON с вызова AJAX и генерировать ваш стол / график из этого. С шаблонами jQuery это совсем не сложно.

Answer 8

Вот модификация ответа Джером Вагнера, который использует рекурсивные карты вместо карты внутри «каждый»:

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();