hw2166的gravatar头像
hw2166 2017-10-21 17:36:55

如何实现多列固定每隔三行的合并?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>表格相同内容合并</title> 
<SCRIPT LANGUAGE="JavaScript"> 
function autoRowSpan(tb,row,col) 
{ 
 for(var col=0;col<3;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)
         { 
            if(pos<3)
             {
              tb.rows[i].deleteCell(col); 
              tb.rows[i-pos].cells[col].rowSpan = 3; 
              pos++; 
             }
            else
             {
              pos=1;
             }            
          }
         else
          { 
            lastValue = value; 
            pos=1; 
          } 
     }      
  }     
} 
</SCRIPT> 
</head> 
<body onload="autoRowSpan(tb,0,0)"> 
合并前: 
<table width="400" border="1" id="tb"> 
<tr> 
<td>a</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td> 
</tr> 
<tr> 
<td>a</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td> 
</tr> 
<tr> 
<td>a</td> 
<td>1</td> 
<td>2</td> 
<td>3</td> 
<td>4</td> 
<td>5</td> 
</tr> 
<tr> 
<td>b</td> 
<td>3</td> 
<td>4</td> 
<td>6</td> 
<td>7</td> 
<td>9</td> 
</tr> 
<tr> 
<td>b</td> 
<td>3</td> 
<td>4</td> 
<td>6</td> 
<td>7</td> 
<td>9</td> 
</tr> 
<tr> 
<td>b</td> 
<td>3</td> 
<td>4</td> 
<td>6</td> 
<td>7</td> 
<td>9</td> 
</tr> 
<tr> 
<td>cc</td> 
<td>2</td> 
<td>3</td> 
<td>5</td> 
<td>5</td> 
<td>6</td> 
</tr> 
<tr> 
<td>cc</td> 
<td>2</td> 
<td>3</td> 
<td>5</td> 
<td>5</td> 
<td>6</td> 
</tr> 
<tr> 
<td>cc</td> 
<td>2</td> 
<td>3</td> 
<td>5</td> 
<td>5</td> 
<td>6</td> 
</tr> 
</table>
</body> 
</html> 
所有回答列表(0)
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友