بيانات جدول 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>

واحصل على المصفوفات:

صفيف للرؤوس

صفيف ثنائي الأبعاد لقيم العمود (أو صفيف لكل عمود)

كيف يمكنني القيام بذلك باستخدام 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 وهي صفيف ثنائي الأبعاد يحتوي على صفوف وأعمدة: 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

إليك تعديل إجابة 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();