问题描述
|
我可以使用具有三列的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)
会让您获得第三名
, 这样的事情应该起作用。
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());
});