js、jquery 遍历table
0
悬赏园豆：5
[已解决问题]
解决于 2012-02-09 08:07
如何遍历一个带有rowspan、colspan的表格将数据存放到data[][]数组里面比如
遍历出来的结果是
.
请给出js代码，当然jquery会更好。
最佳答案
0
代码：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
table
{
border-collapse: collapse;
}
td
{
border:solid 1px #CCC;
width:20px;
height:20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetTableData(){
var tableData=new Array();
$("#testtable tr").each(function(trindex,tritem){
tableData[trindex]=new Array();
$(tritem).find("td").each(function(tdindex,tditem){
tableData[trindex][tdindex]=$(tditem).text();
});
});
alert(tableData);
}
</script>
</head>
<body>
<input type="button" value="GetTableData" onclick="GetTableData();"/>
<table id="testtable">
<tr>
<td>a</td>
<td>b</td>
<td>c</td>
<td>d</td>
<td>e</td>
</tr>
<tr>
<td>a</td>
<td>f</td>
<td>h</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>i</td>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
</tr>
<tr>
<td>a</td>
<td>n</td>
<td>o</td>
<td>b</td>
<td>p</td>
</tr>
</table>
</body>
</html>
tableData就是你要的数组
在线演示地址：http://jscode.chinacxy.com/code/920091dcb4d02bea0630ff2b92ea2af6.aspx
收获园豆：5
额，我说的不是这个。
我说如果带有合并行和和并列的表格如何遍历呢？
如我的截图
@Gamain:
汗，只扫了一眼，原来看错了，这个有点难度啊，我想想再重新回
@Gamain:
分拆后ss怎么变成aa aa了呢，这里的规则是什么样的？
@Gamain:
修改后的方案：
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<style type="text/css">
table
{
border-collapse: collapse;
}
td
{
border:solid 1px #CCC;
width:20px;
height:20px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
function GetTableData(){
var oldTable=$("#testtable").html();
ReCreateTable();
var tableData=new Array();
$("#testtable tr").each(function(trindex,tritem){
tableData[trindex]=new Array();
$(tritem).find("td").each(function(tdindex,tditem){
tableData[trindex][tdindex]=$(tditem).text();
});
});
$("#testtable").html(oldTable);
var result="";
for(var i=0;i<tableData.length;i++){
result+=tableData[i]+"\n";
}
alert(result);
}
function ReCreateTable(){
$("#testtable tr").each(function(trindex,tritem){
$(tritem).find("td").each(function(tdindex,tditem){
var rowspanCount=$(tditem).attr("rowspan");
var colspanCount=$(tditem).attr("colspan");
var value=$(tditem).text();
var newtd="<td>"+value+"</td>";
if(rowspanCount>1){
var parent=$(tditem).parent("tr")[0];
while(rowspanCount-->1){
$(parent).next().prepend(newtd);
parent=$(parent).next();
}
$(tditem).attr("rowspan",1);
}
if(colspanCount>1){
while(colspanCount-->1){
$(tditem).after(newtd);
}
$(tditem).attr("colspan",1);
}
});
});
}
</script>
</head>
<body>
<input type="button" value="GetTableData" onclick="GetTableData();"/>
<table id="testtable">
<tr>
<td rowspan="3">a</td>
<td>c</td>
<td>d</td>
<td>e</td>
<td>e</td>
</tr>
<tr>
<td>f</td>
<td colspan="3">h</td>
</tr>
<tr>
<td>j</td>
<td>k</td>
<td>l</td>
<td>m</td>
</tr>
<tr>
<td>a</td>
<td>n</td>
<td>o</td>
<td>b</td>
<td>p</td>
</tr>
</table>
</body>
</html>
在线演示地址：http://jscode.chinacxy.com/code/f18f2cee69f9c8a66298e83dcf55ac03.aspx
@artwl: 非常感谢，我要的就是这个效果。
现在在做一个项目，可能还会遇到其他问题，新手分不太多只能给这些了。
O(∩_∩)O谢谢。
@artwl: 貌似还有种情况没有考虑到啊
如图，如果有多个列都进行了行合并的话，执行结果中的顺序就乱了
