JS自动合并相同行 .

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

[html] view plaincopyprint?
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  
  2. <HTML>  
  3. <HEAD>  
  4. <TITLE> New Document </TITLE>  
  5. <META NAME="Generator" CONTENT="EditPlus">  
  6. <META NAME="Author" CONTENT="">  
  7. <META NAME="Keywords" CONTENT="">  
  8. <META NAME="Description" CONTENT="">  
  9. </HEAD>  
  10. <SCRIPT LANGUAGE="JavaScript">  
  11.   function autoRowSpan(tb,row,col)  
  12.     {  
  13.         var lastValue="";  
  14.         var value="";  
  15.         var pos=1;  
  16.         for(var i=row;i<tb.rows.length;i++)  
  17.         {  
  18.             value = tb.rows[i].cells[col].innerText;  
  19.             if(lastValue == value)  
  20.             {  
  21.                 tb.rows[i].deleteCell(col);  
  22.                 tb.rows[i-pos].cells[col].rowSpan = tb.rows[i-pos].cells[col].rowSpan+1;  
  23.                 pos++;  
  24.             }else{  
  25.                 lastValue = value;  
  26.                 pos=1;  
  27.             }  
  28.         }  
  29.     }  
  30.   
  31. </SCRIPT>  
  32. <BODY onload="autoRowSpan(tb,0,0)">  
  33. <TABLE id="tb" border="1">  
  34. <THEAD>  
  35.     <TR >  
  36.         <TD>国家</TD>  
  37.         <TD>地区</TD>  
  38.     </TR>  
  39. </THEAD>  
  40. <TR>  
  41.  <TD>中国</TD>  
  42.  <TD>河南</TD>  
  43. </TR>  
  44. <TR>  
  45.  <TD>中国</TD>  
  46.  <TD>四川</TD>  
  47. </TR>  
  48. <TR>  
  49.  <TD>中国</TD>  
  50.  <TD>北京</TD>  
  51. </TR>  
  52. <TR>  
  53.  <TD>美国</TD>  
  54.  <TD>纽约</TD>  
  55. </TR>  
  56. <TR>  
  57.  <TD>美国</TD>  
  58.  <TD>洛杉矶</TD>  
  59. </TR>  
  60. <TR>  
  61.  <TD>英国</TD>  
  62.  <TD>伦敦</TD>  
  63. </TR>  
  64. </TABLE>  
  65. </BODY>  
  66. </HTML>  

 

posted @ 2012-04-19 10:39  看透美女  阅读(271)  评论(0)    收藏  举报