我可以使用JQuery遍历表并收集三个数组中的值吗

Can I iterate through table using JQuery and collect values in three arrays?

本文关键字:三个 数组 JQuery 可以使 遍历 我可以      更新时间:2023-09-26

我可以使用JQuery在id为"tbl"的表中迭代三列并在三个javascript数组中收集这个值吗?

下面是一个示例

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> 

您可以使用它来查找'tr'中的第N个元素所以$("#tbl td").eq(2)会给你第三个"td"

这样的东西应该可以工作。

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

您可以循环浏览列并通过索引对其进行组织。这不是一个语义表,但如果添加了头/正文,请确保也适当地更改选择器。

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>

当然可以:

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