我可以使用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>