HTML 从 table 页脚 (dataTable) 获取数据

Question

我有数据表 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>

如何从 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 table: Fiddle

Answer 1

您可以给有问题的页脚 TH 一些 ID，然后使用 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/

Answer 2

使用以下 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。

HTML 从 table 页脚 (dataTable) 获取数据

HTML get data from table footer (dataTable)

html

javascript

jquery

html-table

google-visualization