日期:2014-05-17 浏览次数:20943 次
<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;