JS自动合并相同行

最新推荐文章于 2024-04-25 00:00:00 发布

原创最新推荐文章于 2024-04-25 00:00:00 发布 · 2.3k 阅读

0 ·

CC 4.0 BY-SA版权

界面js之类的东西同时被 2 个专栏收录

8 篇文章

订阅专栏

7 篇文章

订阅专栏

这篇博客介绍了一种用JavaScript实现HTML表格中相同行自动合并的方法。通过遍历表格，比较相邻行的特定列内容，如果相同则合并行，增加rowspan属性，从而达到视觉上合并的效果。

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

[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>