我可以使用JQuery遍歷表並在三個數組中收集值嗎？

Question

我可以使用帶有三列的JQuery遍歷id =「tbl」的表，並在三個javascript數組中收集這個值嗎？

Answer 1

下面是一個例子

http://jsfiddle.net/SpE7F/

的Javascript：

$().ready(function(){ 
    var trArray = [] 
    $('#tbl tr').each(function(){ 
      var tdArray = [] 
      $(this).find('td').each(function(){ 
       tdArray.push($(this).text()) 
      }) 
      trArray.push(tdArray)  
    }) 
    //console.log(trArray) 
    for(row = 0; row < trArray.length; row++){ 
     for(cell = 0; cell < trArray[row].length; cell++){ 
      alert('row: '+row+', cell: '+cell+' value: '+trArray[row][cell]) 
     } 
    } 
}) 

HTML

<table id="tbl" border="1"> 
    <tr> 
     <td>1</td> 
     <td>2</td> 
     <td>3</td>   
    </tr> 
    <tr> 
     <td>4</td> 
     <td>5</td> 
     <td>6</td>   
    </tr>  
</table> 

Answer 2

可以使用this找到第N個元素的「TR」 所以$("#tbl td").eq(2)都可以獲得3「TD」

Answer 3

這樣的事情應該工作。

firstCols = new Array(); 
secondCols = new Array(); 
thirdCols = new Array(); 

$(function() { 
    $("#tbl tr").each(function(i) { 
     var firstChild = $(this).children().first(); 
     firstCols[i] = firstChild.text(); 
     secondCols[i] = firstChild.next().text(); 
     thirdCols[i] = firstChild.next().next().text(); 
    }); 
}); 

Answer 4

當然，您可以：

// Column-arrays 
var col1 = new Array(); 
var col2 = new Array(); 
var col3 = new Array(); 

// Cache table 
var table = $('#tbl'); 

// Iteratate over rows 
var rows = table.find('tr'); 
rows.each(function() { 
    // Iterate over columns 
    var columns = this.children('td'); 
    // Save column-values in separate arrays 
    col1.push(columns[0].html()); 
    col2.push(columns[1].html()); 
    col3.push(columns[2].html()); 
}); 

Answer 5

您可以遍歷列並通過索引組織它。這不是一個語義表，但是如果添加標題/主體，請確保相應地更改選擇器。

var arr = []; 
$('#tbl td').each(function(){ 
    var colId = $(this).index(); 
    var rowId = $(this).parent().index(); 
    if (arr[colId] == undefined) { 
     arr[colId] = []; 
    } 
    arr[colId][rowId] = $(this).html(); 
}); 
console.log(arr); 

這裏的小提琴：http://jsfiddle.net/MfxA9/

這裏的HTML

<table id='tbl'> 
    <tr> 
     <td>Col 1 : Row 1</td> 
     <td>Col 2 : Row 1</td> 
     <td>Col 3 : Row 1</td> 
    </tr> 

    <tr> 
     <td>Col 1 : Row 2</td> 
     <td>Col 2 : Row 2</td> 
     <td>Col 3 : Row 2</td> 
    </tr> 
    <tr> 
     <td>Col 1 : Row 3</td> 
     <td>Col 2 : Row 3</td> 
     <td>Col 3 : Row 3</td> 
    </tr> 
     <tr> 
     <td>Col 1 : Row 4</td> 
     <td>Col 2 : Row 4</td> 
     <td>Col 3 : Row 4</td> 
    </tr> 
</table>