您的位置：首页 > Web前端 > JavaScript

JS自动合并相同行 .

2012-04-19 10:39 316 查看
页面列表展现的时候经常会出现某列中有相同行的情况，有时会需要我们合并这些具有相同行的列，这时可以用一种比较简单的方法来实现，即JS来实现

[html] view plaincopyprint?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<HTML>

<HEAD>

<TITLE> New Document </TITLE>

<META NAME="Generator" CONTENT="EditPlus">

<META NAME="Author" CONTENT="">

<META NAME="Keywords" CONTENT="">

<META NAME="Description" CONTENT="">

</HEAD>

<SCRIPT LANGUAGE="JavaScript">

function autoRowSpan(tb,row,col)

{

var lastValue="";

var value="";

var pos=1;

for(var i=row;i<tb.rows.length;i++)

{

value = tb.rows[i].cells[col].innerText;

if(lastValue == value)

{

tb.rows[i].deleteCell(col);

tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1;

pos++;

}else{

lastValue = value;

pos=1;

}

}

}

</SCRIPT>

<BODY onload="autoRowSpan(tb,0,0)">

<TABLE id="tb" border="1">

<THEAD>

<TR >

<TD>国家</TD>

<TD>地区</TD>

</TR>

</THEAD>

<TR>

<TD>中国</TD>

<TD>河南</TD>

</TR>

<TR>

<TD>中国</TD>

<TD>四川</TD>

</TR>

<TR>

<TD>中国</TD>

<TD>北京</TD>

</TR>

<TR>

<TD>美国</TD>

<TD>纽约</TD>

</TR>

<TR>

<TD>美国</TD>

<TD>洛杉矶</TD>

</TR>

<TR>

<TD>英国</TD>

<TD>伦敦</TD>

</TR>

</TABLE>

</BODY>

</HTML>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<SCRIPT LANGUAGE="JavaScript">
function autoRowSpan(tb,row,col)
{
var lastValue="";
var value="";
var pos=1;
for(var i=row;i<tb.rows.length;i++)
{
value = tb.rows[i].cells[col].innerText;
if(lastValue == value)
{
tb.rows[i].deleteCell(col);
tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1;
pos++;
}else{
lastValue = value;
pos=1;
}
}
}

</SCRIPT>
<BODY onload="autoRowSpan(tb,0,0)">
<TABLE id="tb" border="1">
<THEAD>
<TR >
<TD>国家</TD>
<TD>地区</TD>
</TR>
</THEAD>
<TR>
<TD>中国</TD>
<TD>河南</TD>
</TR>
<TR>
<TD>中国</TD>
<TD>四川</TD>
</TR>
<TR>
<TD>中国</TD>
<TD>北京</TD>
</TR>
<TR>
<TD>美国</TD>
<TD>纽约</TD>
</TR>
<TR>
<TD>美国</TD>
<TD>洛杉矶</TD>
</TR>
<TR>
<TD>英国</TD>
<TD>伦敦</TD>
</TR>
</TABLE>
</BODY>
</HTML>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航