首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > JAVA > Java Web开发 >

html中合并单元格,该怎么处理

2012-01-18 
html中合并单元格在html中table有没有办法可以将上下2行合并为一行,我知道合并一列可以用colspan,不知道合

html中合并单元格
在html中table有没有办法可以将上下2行合并为一行,我知道合并一列可以用colspan,不知道合并一行可不可以?

[解决办法]
也想知道,关注。。。
[解决办法]
合并一行用rowspan,用法和colspan一样!
[解决办法]
合并行:rowspan
[解决办法]
用rowspan这个属性,用法如下

HTML code
<table width=300 height=100 border=0 align="center" cellspacing=0 cellpadding=0> <tr>  <td rowspan=3>例子</td>  <td>选项一</td> </tr> <tr>  <td>选项二</td> </tr> <tr>  <td>选项三</td> </tr></table>
[解决办法]
用rowspan
[解决办法]
<style>
.td_blue{background-color:#3982F7;}
</style>

<table id="tableId" name="tableId" align="center" cellpadding="2" cellspacing="1" width="300" class="border3" border="2" >

 <tr>
<td align="left" class="color9" id="cor_1" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(11);sel(1);">111</td>
<td align="left" class="color9" id="cor_2" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(21);sel(2);">222</td>
</tr>
<tr>
<td align="left" class="color9" id="cor_3" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(12);sel(3);">333</td>
<td align="left" class="color9" id="cor_4" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(22);sel(4);">444</td>

</tr>
<tr>
<td align="left" class="color9" id="cor_5" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(13);sel(5);">555</td>
<td align="left" class="color9" id="cor_6" colspan="2" rowSpan="1" height="43" width="50%" onclick="selTD(23);sel(6);">666</td>

</tr>
</table>
<p align="center"><input type="button" value="合并" onclick="selTD('join');sel(7);"></p>
<script>
function sel(i){

x=document.getElementById('cor_'+i)
if(i!=7){x.className="td_blue"}
}

var td_array=new Array();
var flag='td_flag';
var tdcol1="",tdcol2="",tdrow1="",tdrow2="";
function selTD(i)
{
i=i.toString();
if(flag!="td_flag"&&i!='join'){
tdcol2=i.substr(0,1)
tdrow2=i.substr(1,1)
}
if(flag=='td_flag'&&i!='join'){
tdcol1=i.substr(0,1)
tdrow1=i.substr(1,1)
flag=i
}

if(i=="join"){

doTab(tdcol1,tdcol2,tdrow1,tdrow2);
flag='td_flag';

}

}

function doTab(tdcol1,tdcol2,tdrow1,tdrow2){

if(tdcol1>tdcol2) {var temp=tdcol1;
tdcol1=tdcol2;
tdcol2=temp;
}
if(tdrow1>tdrow2) {var temp=tdrow1;


tdrow1=tdrow2;
tdrow2=temp;
}

x1=tdcol1-1;
x2=tdcol2-1;
y1=tdrow1-1;
y2=tdrow2-1; 

 
if (x1==x2 && y1==y2) return;
htmlstr="";
xspan=0;
yspan=0;
for (i=x1;i<=x2;i++) 
xspan+=tableId.rows[y1].cells[i].colSpan;
for (i=y1;i<=y2;i++) 
yspan+=tableId.rows[i].cells[x1].rowSpan;

for (i=y1;i<=y2;i++) { 
htmlstr+="<br>"; 
 
for(j=x1;j<=x2;j++){
if(tableId.rows[i].cells[j].innerHTML!=""){
htmlstr+=tableId.rows[i].cells[j].innerHTML;
}

}

htmlstr=htmlstr.substr(4); 
for (i=y1;i<=y2;i++){ 
j=x1; 
while (j<x2){ 
tableId.rows[i].deleteCell(x1); 
j++; 

if(xspan!=""){ tableId.rows[i].cells[x1].colSpan=xspan;}
}
for (i=y2;i>y1;i--){
tableId.rows[i].deleteCell(x1);
}
tableId.rows[y1].cells[x1].rowSpan=yspan;
tableId.rows[y1].cells[x1].innerHTML=htmlstr;
}

</script>
你试试看 选择变色后点击合并
[解决办法]
rowspan啦

热点排行