js+html:table td合并单元格后，动态新增一行，能保持td合并的状态吗？js（jquery）代码该如何写？
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js+html:table td合并单元格后，动态新增一行，能保持td合并的状态吗？js（jquery）代码该如何写？相关的知识，希望对你有一定的参考价值。
效果如图。
要求 火狐 ie 兼容。。。拜托各位大侠了。。。
js动态添加行怎么合并单元格
参考技术A colspan, rowspan 参考技术B 一般考官都喜欢考这个问题最能体现你的基本功，的确要用到colspan,rowspan，但是关键的dom的一些操作
如果单独colspan,rowspan,表格会变形
给你个例子吧！我自己写的，图方便，只合并了固定的单元格，自己改吧！
<html>
<head>
<title>table operation</title>
</head>
<body>
<table id='newtable'>
</table>
<table id='table'>
<tr><td><button onclick="insRow();">insert row </button></td><td><button onclick="deleteRow();">delete row</button><input type="text" id='index'/></td></tr>
<tr><td><button onclick="insertCell();">insert cell</button></td><td><button onclick="deleteCell();">delete cell</button><button onclick="merge();">merge</button></td></tr>
</table>
</body>
<html>
<script>
newtable=document.getElementById('newtable');
newtable.border="1px";
newtable.width="500px";
for (i=1;i<10;i++)
row=document.createElement('tr');
row.id=i;
for (j=1;j<10;j++)
cell=document.createElement('td');
cell.id=i+"/"+j;
cell.innerHTML=cell.id;
row.appendChild(cell);
newtable.appendChild(row);
function insRow()
row_length=newtable.rows.length;
newrow=document.createElement('tr');
newrow.id=row_length+1;
for (var i=1;i<10;i++)
var newcell=document.createElement('td');
newcell.innerHTML=newrow.id+'/'+i;
newrow.appendChild(newcell);
newtable.appendChild(newrow);
function deleteRow()
//alert(newtable.rows[4].rowIndex);
var index=document.getElementById('index').value-1;//ie,chrome得到-1；
if(index!=-1&&newtable.rows.length>index)newtable.deleteRow(index);//firefox 能得到rowIndex;ca!
document.onclick=function(e)
//alert('ok');
var evt=e||window.event;
var target=evt.srcElement||evt.target;
//alert(target.tagName);
if(target.parentNode&&target.parentNode.parentNode&&target.parentNode.parentNode.id&&target.parentNode.parentNode.id.toLowerCase()=='newtable')
document.getElementById('newtable').removeChild(target.parentNode);
function merge()
var beginrow=3;
var endrow=5;
var begincell=5;
var endcell=10;
rowspan=endrow-beginrow+1;
cellspan=endcell-begincell+1;
for (var i=endrow;i>=beginrow;i--)
for (var j=endcell;j>=begincell;j--)
if (i==beginrow&&j==begincell)else//指定的起始单元格不能删除
//var row=i;
//var col=j;
//alert(i+':'+j);
if(document.getElementById(i+'/'+j)!=null)elem=document.getElementById(i+'/'+j);elem.parentNode.removeChild(elem);
var obj=document.getElementById(beginrow+'/'+begincell);
obj.setAttribute('rowspan',rowspan);
obj.setAttribute('colspan',cellspan);
</script>本回答被提问者和网友采纳
以上是关于js+html:table td合并单元格后，动态新增一行，能保持td合并的状态吗？js（jquery）代码该如何写？的主要内容，如果未能解决你的问题，请参考以下文章