[javascript] Данные таблицы HTML в массивы через jQuery


Answers

демо обновлено 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);
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, а затем отображать таблицу и диаграмму?




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

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



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

    $(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




    Что-то вроде:

    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'




    Related