Question

我试图为每一行获取Date1 Date2 Date3 Date4的值，这样行将等于一个数组[]，行[0]为[3,3,4,6]，行[1]为[93.9,99,98.9,99] ...

$(function() {
  var $table = $("#work_table"),
      $headerCells = $table.find("th"),
      $rows = $table.find("tr tr");

  var headers = [],
      rows = [];

    $headerCells.each(function(k,v) {
     headers[headers.length] = $(this).text();
  });

  $rows.each(function(row,v) {
    $(this).find("td").each(function(cell,v) {
      if (typeof rows[cell] === 'undefined') rows[cell] = [];
      rows[cell][row] = $(this).text();
    });
  });

  console.log(headers);
  //console.log(rows);
  alert(headers);
  alert(rows);
});

我已经有了标题。

注意：也许我需要更改class和id属性。

Answer 1

这部分意味着找到tr女巫不是你想要的。

$rows = $table.find("tr tr");

试试这个

$rows = $table.find("tr");

我updated your jsFiddle向您展示。

此外，尝试记录表行（tr）不会给你太多结果，因为它的“text-element”为空。您将必须遍历每个tr并记录每个td。

我在another SO question上找到了关于遍历表格的脚本：

$(document).ready(function() {
    var rows = $('#mytab tbody >tr');
    var columns;
    for (var i = 0; i < rows.length; i++) {
        columns = $(rows[i]).find('td');
        for (var j = 0; j < columns.length; j++) {
            console.log($(columns[j]).html());
        }
    }
});

希望这有帮助。

Answer 2

问题在于您的标记和选择器，A TR不能将另一个tr作为孩子。

您需要使用thead的tbody和table元素对其进行分组，例如

<table id="work_table" border="2">
    <thead>
        <tr>
            <th>Service</th>
            <th>Measure</th>
            <th>Date1</th>
            <th>Date2</th>
            <th>Date3</th>
            <th>Date4</th>
            <th>Target</th>
            <th>Trend</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="4">Service1</td>
            <td>KPI1</td>
            <td class="r1c1">3</td>
            <td class="r1c2">3</td>
            <td class="r1c3">4</td>
            <td class="r1c4">6</td>
            <td class="r1c5">5</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI2</td>
            <td class="r2c1" align="center">93.9</td>
            <td class="r2c2" align="center">99</td>
            <td class="r2c3" align="center">98.9</td>
            <td class="r2c4" align="center">99.0</td>
            <td class="r2c5" align="center">99</td>
            <!-- this will be fixed -->
            <td align="center"><span class="dynamicsparkline"> </span></td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI4</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="3">Service2</td>
            <td>KPI1</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
    </tbody>
    <tbody>
        <tr>
            <td rowspan="5">Service3</td>
            <td>KPI1</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI3</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI4</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
        <tr>
            <td>KPI5</td>
            <td>Value_Date1</td>
            <td>Value_Date2</td>
            <td>Value_Date3</td>
            <td>Value_Date4</td>
            <td>Value_Target</td>
            <td>Value_Trend</td>
        </tr>
    </tbody>
</table>

然后使用.map()获取结果

$(function () {
    var $table = $("#work_table"),
        $headerCells = $table.find("thead th"),
        $rows = $table.find("tbody tr");

    var headers, rows;

    headers = $headerCells.map(function (k, v) {
        return $.trim($(this).text())
    }).get();

    rows = $rows.map(function (row, v) {
        return [$(this).find("td:gt(-7):lt(-1)").map(function (cell, v) {
            return $.trim($(this).text());
        }).get()];
    }).get();

    console.log(JSON.stringify(headers));
    console.log(JSON.stringify(rows));
});

演示：Fiddle

使用jQuery从html中的表中获取值

2 个答案: