HTML получить данные из таблицы сноски (DataTable)

Question

У меня есть DataTable с этим HTML:

<table id="example" class="table table-striped table-bordered table-responsitive dataTable" cellspacing="0" width="100%" role="grid" aria-describedby="example_info" style="width: 100%;"> 
     <thead> 
      <tr role="row"><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Naziv: activate to sort column ascending" style="width: 44px;">Naziv</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Povrsina: activate to sort column ascending" style="width: 69px;">Povrsina</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Lokacija: activate to sort column ascending" style="width: 67px;">Lokacija</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Osnov: activate to sort column ascending" style="width: 53px;">Osnov</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Kultura: activate to sort column ascending" style="width: 59px;">Kultura</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Seme-sadnice: activate to sort column ascending" style="width: 109px;">Seme-sadnice</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Radnici $: activate to sort column ascending" style="width: 74px;">Radnici $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Gorivo $: activate to sort column ascending" style="width: 68px;">Gorivo $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Inputi $: activate to sort column ascending" style="width: 61px;">Inputi $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Ukupno $: activate to sort column ascending" style="width: 77px;">Ukupno $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="Dobit $: activate to sort column ascending" style="width: 58px;">Dobit $</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label="ROI %: activate to sort column ascending" style="width: 49px;">ROI %</th><th class="sorting" tabindex="0" aria-controls="example" rowspan="1" colspan="1" aria-label=": activate to sort column ascending" style="width: 85px;"></th></tr> 
     </thead> 

     <tfoot> 
      <tr><th rowspan="1" colspan="1">Parcela</th><th rowspan="1" colspan="1">5.0607</th><th rowspan="1" colspan="1">Lokacija</th><th rowspan="1" colspan="1">Osnov</th><th rowspan="1" colspan="1">Kultura</th><th rowspan="1" colspan="1"></th><th rowspan="1" colspan="1">960</th><th rowspan="1" colspan="1">1355</th><th rowspan="1" colspan="1">1150</th><th rowspan="1" colspan="1">3465</th><th rowspan="1" colspan="1">17500</th><th rowspan="1" colspan="1">405</th><th rowspan="1" colspan="1"></th></tr> 
     </tfoot> 
    <tbody><tr role="row" class="odd"><td>prva</td><td>5.0607</td><td>ns</td><td>vlasnistvo</td><td>vocnjak</td><td>Breskva</td><td>960</td><td>1355</td><td>1150</td><td>3465</td><td>17500</td><td>405 %</td><td><div style="float:right;"><button class="btn btn-info" data-toggle="modal" data-target="#myModal1">Detalji...</button> <i data-toggle="modal" data-target="#delete" class="fa fa-times"></i></div></td></tr></tbody></table> 

Как я могу получить значения из таблицы сноски (значение из столбцов radnici $, gorivo $, inputi $)?

Мне нужны эти данные, чтобы создать таблицу с визуализацией Google ... так что мне нужно:

var data = google.visualization.arrayToDataTable([ 
      ['aaa', 'bbb'], 
      ['Radnici',  here I need value from table footer of column radici], 
      ['Gorivo',  from column gorivo], 
      ['Inputi', from column inputi], 

     ]); 

Как получить эти данные?

HTML таблицы: Fiddle

Answer 1

Использование следующий jQuery для доступа к значениям:

var radnici = $("tfoot th:nth-child(7)").text(); 
var gorivo = $("tfoot th:nth-child(8)").text(); 
var inputi = $("tfoot th:nth-child(9)").text(); 

После доступа к значениям вы можете передать их для создания диаграммы с визуализацией google.

Вот DEMO.

Answer 2

Вы можете дать футер TH-х в вопросе некоторые идентификаторы и получать значения с помощью JQuery:

<tfoot> 
    <tr> 
    <th rowspan="1" colspan="1">Parcela</th> 
    <th rowspan="1" colspan="1">5.0607</th> 
    <th rowspan="1" colspan="1">Lokacija</th> 
    <th rowspan="1" colspan="1">Osnov</th> 
    <th rowspan="1" colspan="1">Kultura</th> 
    <th rowspan="1" colspan="1"></th> 
    <th rowspan="1" colspan="1" id="radnici">960</th> 
    <th rowspan="1" colspan="1" id="gorivo">1355</th> 
    <th rowspan="1" colspan="1" id="inputi">1150</th> 
    <th rowspan="1" colspan="1">3465</th> 
    <th rowspan="1" colspan="1">17500</th> 
    <th rowspan="1" colspan="1">405</th><th rowspan="1" colspan="1"></th> 
    </tr> 
</tfoot> 

---

var radnici = Number($('#radnici').html()); 
var gorivo = Number($('#gorivo').html()); 
var inputi = Number($('#inputi').html()); 
console.log(radnici, gorivo, inputi); 

var data = google.visualization.arrayToDataTable([ 
      ['aaa', 'bbb'], 
      ['Radnici', radnici], 
      ['Gorivo', gorivo], 
      ['Inputi', inputi], 

     ]); 

http://jsfiddle.net/L3kh39t1/3/