首页 新闻 赞助 找找看

js、jquery 遍历table

0
悬赏园豆:5 [已解决问题] 解决于 2012-02-09 08:07

如何遍历一个带有rowspan、colspan的表格将数据存放到data[][]数组里面比如

遍历出来的结果是.

请给出js代码,当然jquery会更好。

Gamain的主页 Gamain | 菜鸟二级 | 园豆:357
提问于:2012-02-08 18:00
< >
分享
最佳答案
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
artwl | 专家六级 |园豆:16736 | 2012-02-08 18:29

额,我说的不是这个。

我说如果带有合并行和和并列的表格如何遍历呢?

如我的截图

Gamain | 园豆:357 (菜鸟二级) | 2012-02-08 19:45

@Gamain: 

汗,只扫了一眼,原来看错了,这个有点难度啊,我想想再重新回

artwl | 园豆:16736 (专家六级) | 2012-02-08 19:50

@Gamain: 

分拆后ss怎么变成aa aa了呢,这里的规则是什么样的?

artwl | 园豆:16736 (专家六级) | 2012-02-08 19:52

@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 | 园豆:16736 (专家六级) | 2012-02-08 21:20

@artwl: 非常感谢,我要的就是这个效果。

现在在做一个项目,可能还会遇到其他问题,新手分不太多只能给这些了。

O(∩_∩)O谢谢。

Gamain | 园豆:357 (菜鸟二级) | 2012-02-09 08:05

@artwl: 貌似还有种情况没有考虑到啊

如图,如果有多个列都进行了行合并的话,执行结果中的顺序就乱了

Gamain | 园豆:357 (菜鸟二级) | 2012-02-09 10:59

@Gamain: 

原来的那个是有些问题,我修改了一下,参考这里:

http://www.cnblogs.com/artwl/archive/2012/02/08/2343335.html

artwl | 园豆:16736 (专家六级) | 2012-02-11 12:37
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册