怎样分割单元格呢？（合适答案马上结贴）

如果不在IE下你可以试试下边这个代码：不知道是不是你想要的效果
<html>
<head>
</head>
<body>
<script type='text/javascript'>
var hasChanged=false;
function change(){
var tr=document.getElementById("test");
if(!hasChanged){
tr.innerHTML="<td>1</td><td>2</td><td>3</td><td>4</td>";
hasChanged=true;
return;
} else {
tr.innerHTML="<td colspan='4'>1</td>";
hasChanged=false;
return;
}}
</script>
<table border=1 width='200px'>
<tr id='test'><td colspan="4">1</td></tr>
<tr><td>1</td>
  <td> </td>
  <td> </td>
  <td> </td>
</tr>
<tr><td>1</td>
  <td> </td>
  <td> </td>
  <td> </td>
</tr>
<tr><td>1</td>
  <td> </td>
  <td> </td>
  <td> </td>
</tr>
</table>
<input type='button' value='change' onclick='change()'>
</body>
</html>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

最简单的方法就是向你要拆的地方直接加入个table,行列随你定.
如果涉及到合并的话，那估计就麻烦一些了...
要操作colspan
rowspan什么的..
还要操作些其它的东西,怪麻烦的...
区别？我的功力还不够深厚 -_-!我只知道innerHTML在IE下解释，尤其是对table进行处理的时候就会出问题而在firefox Opera Netscape都是正常的
计算很复杂的。。需要把单元格所在的行和列的colspan和rowspan+1 ，如果考虑嵌套的情况，能让人疯掉的。
....
哪有啊...原先做布局一直用table.所以习惯了欠套....:D
很少用合并单元格
muxrwc 能否说得详细点或给个例子？
thanks！
其实看你怎么实现,你可以通过动态删除增加来做呀,没有不要修改rowspan clospan属性的比方: 一个大的单元格,在这个row中插入3列,让每个宽度为 table.width/4 ;就是 4列     恢复: 点击按钮,把后面的三列干掉,把相应的里面文本元素拷贝到第一列就可以了!
我说的是类似这种的意思....
不过这样样式要自己设置下...
<!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=gb2312" />
<title>测试</title>
</head>
<body>
<script type='text/javascript'>
var change = function (id, state) {
var cell = document.getElementById(id), defaultValue = ''

if (cell.getAttribute('_rowspan') == state) return;
cell.setAttribute('_rowspan', state);

if (state) {
//拆分
defaultValue = cell.innerHTML;
cell.innerHTML = '<table border="1" width="100%"><tr>' + new Array(5).join('<td> <\/td>') + '<\/tr><\/table>';
cell.getElementsByTagName('td')[0].innerHTML = defaultValue;
} else {
//还原
defaultValue = cell.getElementsByTagName('td')[0].innerHTML;
cell.innerHTML = defaultValue;
}
};
</script>
<table border=1 width='200px'>
    <tr>
     <td id='cell'>特定的行</td>
    </tr>
    <tr>
     <td>1</td>
    </tr>
    <tr>
        <td>2</td>
    </tr>
    <tr>
        <td>3</td>
    </tr>
</table>
<input type='button' value='拆分' onclick='change("cell", 1)'>
<input type='button' value='还原' onclick='change("cell", 0)'>
</body>
</html>
满有意思的功能，写了个简单的，对于复杂的表格还需要修改下程序，下面的程序在ie和ff下运行
测试了下没问题，在op下分割可以，合并不行，对这个浏览器不是很了解，还不清楚是什么原因
<!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 type="text/javascript">
function $(strId){
return document.getElementById(strId);
}function splitTd(oTd){
    var i,nTrCount,nCellIndex;
    var oTr=oTd.parentNode;
var oNextTd=oTr.cells[oTd.cellIndex+1];
var oTbody=oTr.parentNode;
var oNewTd;

oNewTd=document.createElement("td");
oNewTd.innerHTML="1"
oTr.insertBefore(oNewTd,oNextTd);
oNewTd=document.createElement("td");
oNewTd.innerHTML="2"
oTr.insertBefore(oNewTd,oNextTd);
oNewTd=document.createElement("td");
oNewTd.innerHTML="3"
oTr.insertBefore(oNewTd,oNextTd);

nTrCount=oTr.parentNode.rows.length;
nCellIndex=oTd.cellIndex;
for(i=0;i<nTrCount;i++){
if(oTbody.rows[i]!=oTr){
oTbody.rows[i].cells[nCellIndex].setAttribute("colSpan",4);
}
}
}function mergeTd(oTd){
    var i,nTrCount,nCellIndex=oTd.cellIndex;
    var oTr=oTd.parentNode;
var oTbody=oTr.parentNode;

oTd.innerHTML+=oTr.cells[nCellIndex+1].innerHTML
oTr.removeChild(oTr.cells[nCellIndex+1]);
oTd.innerHTML+=oTr.cells[nCellIndex+1].innerHTML
oTr.removeChild(oTr.cells[nCellIndex+1]);
oTd.innerHTML+=oTr.cells[nCellIndex+1].innerHTML
oTr.removeChild(oTr.cells[nCellIndex+1]);

nTrCount=oTr.parentNode.rows.length;
for (i=0;i<nTrCount;i++){
if(oTbody.rows[i]!=oTr){
oTbody.rows[i].cells[nCellIndex].setAttribute("colSpan",1);
}
}
}
</script>
</head>
<body>
<input type="button" name="btnSplit" id="btnSplit" value="分割"  onclick="splitTd($('mytd'))"/>
<input type="button" name="btnJoin" id="btnJoin" value="合并" onclick="mergeTd($('mytd'))"/>
<table width="61%" border="1" align="center" cellpadding="0" cellspacing="0" id="mytable1">
  <tr>
    <td width="9%">表头1</td>
    <td width="69%">表头2</td>
    <td width="14%">表头3</td>
    <td width="8%">表头4</td>
  </tr>
  <tr>
    <td> </td>
    <td id="mytd">cc</td>
    <td>ddd</td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
    <td> </td>
    <td> </td>
  </tr>
</table>
</body>
</html>
用div行不行？2个div，用button控制哪个div显示。
to: joegu
能详细说说吗？
试用了一下，还是觉得切换Div的方式不够好。因为我每个单元格里面都有一个ocx控件。如果用切换Div的方式，整个页面得放很多ocx控件。如果用动态变换td的方式，只需要几个ocx放在几个单元格就够了。
另外，我想做的是：在一个table里，每个单元格都有一个ocx控件，能选择显示1个，也能显示4个、9个等。