2012-09-26 6 views
0

jquery를 처음 사용하고 테이블을 기반으로 그래프를 생성하는 데 익숙하지 않습니다. 좋은 예제를 발견 : http://coding.smashingmagazine.com/2011/09/23/create-an-animated-bar-graph-with-html-css-and-jquery/jquery 테이블에서 값을 선택하십시오.

하지만 내 질문은 테이블을 선택하고 배열에 넣어하는 방법입니다. 내가 튜토리얼로 찾고 있어요 경우

<table id="data-table" border="1" cellpadding="10" cellspacing="0"> 
     <caption> 
     table 
     </caption> 
     <thead> 
     <tr> 
      <td>month</td> 
      <th scope="col">usage 1</th> 
      <th scope="col">usage 2</th> 

     </tr> 
     </thead> 
     <tbody> 
     <tr> 
      <th scope="row">jan</th> 
      <td>1</td> 
      <td>2</td> 
     </tr> 
     <tr> 
      <th scope="row">feb</th> 
      <td>3</td> 
      <td>4</td> 
     </tr> 
     <tr> 
      <th scope="row">march</th> 
      <td>5</td> 
      <td>6</td> 
     </tr> 
        <tr> 
      <th scope="row">april</th> 
      <td>7</td> 
      <td>8</td> 
     </tr> 
        <tr> 
      <th scope="row">may</th> 
      <td>9</td> 
      <td>10</td> 
     </tr> 
     </tbody> 
    </table> 

, 나는 왼쪽에서 오른쪽으로 선택되어 있는지 확인하고 두 배열에 넣어.

5 개 어레이에서 얻을 수있는 방법
// Sort data into groups based on number of columns 
    columnGroups: function() { 
    var columnGroups = []; 
    // Get number of columns from first row of table body 
    var columns = data.find('tbody tr:eq(0) td').length; 
    for (var i = 0; i < columns; i++) { 
     columnGroups[i] = []; 
     data.find('tbody tr').each(function() { 
     columnGroups[i].push($(this).find('td').eq(i).text()); 
     }); 
    } 
    return columnGroups; 
} 

및 값 대신 1, 2 1,3,5,7,9 같은

+1

그것은 2 차원을 만드는 것 array [0] [1]은 2, array [1] [0]은 3, array [1] [1]은 4 등입니다. 레이아웃, 대신 무엇을 원하니? – Barmar

+0

내 테이블 레이아웃이 다르므로 튜토리얼이 설명되었으므로 필드 수가 잘못되었습니다. –

답변

0
$(function(){ 
    var columnGroups = [], 
     table = $('#data-table'); 

    table.find('tbody tr').each(function(index) { 
    columnGroups[index] = []; 
    $(this).find('td').each(function() { 
     columnGroups[index].push($(this).text()); 
    }); 
    }); 

    console.log(columnGroups); 
}); 

데모 : http://jsfiddle.net/tdmvt/

관련 문제