使用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