Javascript Html表格转换成折线图

我无法将HTML表格数据转换为折线图

HTML代码：

JQUERY代码：

当我点击按钮读取数据脚本从服务器读取实时数据并每次点击更新我的表格时，我不知道如何从该表格中绘制折线图。

使用

更新

---

当范围是jQuery时，一定要充分利用它，所以不要在jQuery代码中使用原始js代码。

<input id="reader" type="button" class="btn btn-primary" value="Read data">
    <table id="hodnoty" border="1">
    <thead>
    <tr><th>Q.No.</th><th>T1</th><th>T2</th><th>T3</th><th>T4</th><th>T5</th><th>T6</th><th>T7</th><th>T8</th><th>T9</th><th>T10</th>
            <th>T11</th><th>T12</th><th>T13</th><th>T14</th><th>T15</th><th>T16</th><th>T17</th><th>T18</th><th>T19</th><th>T20</th>
            <th>T21</th><th>T22</th><th>T23</th><th>T24</th><th>T25</th><th>T26</th><th>T27</th><th>T28</th><th>T29</th><th>T30</th>
        </tr>
        </thead>
        <tbody id="refresh">

        </tbody>

var loop=0;
$('#reader').click(function(){
$('#refresh').append("<tr><td>"+loop+"</td><td>"+Value1.value+"</td>"+"<td>"+Value2.value+"</td>"+"<td>"+Value3.value+"</td>"+"<td>"+Value4.value+"</td>"+"<td>"+Value5.value+"</td>"+"<td>"+Value6.value+"</td>"+"<td>"+Value7.value+"</td>"+"<td>"+Value8.value+"</td>"+"<td>"+Value9.value+"</td>"+"<td>"+Value10.value+"</td>"+"<td>"+Value11.value+"</td>"+"<td>"+Value12.value+"</td>"+"<td>"+Value13.value+"</td>"+"<td>"+Value14.value+"</td>"+"<td>"+Value15.value+"</td>"+"<td>"+Value16.value+"</td>"+"<td>"+Value17.value+"</td>"+"<td>"+Value18.value+"</td>"+"<td>"+Value19.value+"</td>"+"<td>"+Value20.value+"</td>"+"<td>"+Value21.value+"</td>"+"<td>"+Value22.value+"</td>"+"<td>"+Value23.value+"</td>"+"<td>"+Value24.value+"</td>"+"<td>"+Value25.value+"</td>"+"<td>"+Value26.value+"</td>"+"<td>"+Value27.value+"</td>"+"<td>"+Value28.value+"</td>"+"<td>"+Value29.value+"</td>"+"<td>"+Value30.value+"</td></tr>");
    loop=loop+1;
});

chart = function () {
    $('#container').highcharts({
        data: {
            table: document.getElementById('datatable')
        },
        chart: {
            type: 'line'
        },
        title: {
            text: 'Data extracted from a HTML table in the page'
        },
        yAxis: {
            title: {
                text: 'Units'
            }
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.series.name + '</b><br/>' + this.point.y + ' ' + this.point.name.toLowerCase();
            }
        }
    });