使用jquery在html中从表中获取值

Question

我想获取每个行的Date1 Date2 Date3 Date4的值，所以行将等于数组[]， ，行[0]将是[3 ，3,4,6]和行[1]是[93.9,99,98.9,99] ...

看到JS小提琴这里 http://jsfiddle.net/HLhT4/1/

$(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); 
}); 

我已经有头部。

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

Answer 1

这部分意味着在tr tritch找到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作为孩子。

您需要使用的tablethead和tbody元素，他们组像

<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