JavaScript（JS）动态生成table（混合table）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script>
function addProduct01(){
var tabObj=document.getElementById("inventoryTable01");//获取添加数据的表格
var rowsNum = tabObj.rows.length; //获取当前行数
var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数
var addRow = tabObj.insertRow(rowsNum);//插入新行
var addRow0=addRow.insertCell(0);
addRow0.innerHTML="<input type='checkbox' name='chkArr01' id='chkArr01'"+rowsNum+" style='width:20px' />";
var addRow1=addRow.insertCell(1);
addRow1.innerHTML="<input type='test' name='productName' id='productName'"+rowsNum+" style='border:0px;width:180px' />";
var addRow2=addRow.insertCell(2);
addRow2.innerHTML="<input type='test' name='specifications' id='specifications'"+rowsNum+" style='border:0px;width:180px' />";
var addRow3=addRow.insertCell(3);
addRow3.innerHTML="<input type='test' name='units' id='units'"+rowsNum+" style='border:0px;width:50px' />";
var addRow4=addRow.insertCell(4);
addRow4.innerHTML="<input type='test' name='amount' id='amount'"+rowsNum+" style='border:0px;width:50px' />";
var addRow5=addRow.insertCell(5);
addRow5.innerHTML="<input type='test' name='price' id='price'"+rowsNum+" style='border:0px;width:70px' />";
var addRow6=addRow.insertCell(6);
addRow6.innerHTML="<input type='test' name='sum01' id='sum01'"+rowsNum+" style='border:0px;width:70px' />";
document.getElementById("headlinerow01").rowSpan = rowsNum+1;
}
//窗口表格删除一行
function removeRow01(){
var chkObj=document.getElementsByName("chkArr01");
var productNameObj=document.getElementById("inventoryTable01");
for(var k=0;k<chkObj.length;k++){
if(chkObj[k].checked){
productNameObj.deleteRow(k+1);
k=-1;
}
}
}
function addProduct02(){
var tabObj=document.getElementById("inventoryTable02");//获取添加数据的表格
var rowsNum = tabObj.rows.length; //获取当前行数
var colsNum=tabObj.rows[rowsNum-1].cells.length;//获取行的列数
var addRow = tabObj.insertRow(rowsNum);//插入新行
var addRow0=addRow.insertCell(0);
addRow0.innerHTML="<input type='checkbox' name='chkArr02' id='chkArr02'"+rowsNum+" style='width:20px' />";
var addRow1=addRow.insertCell(1);
addRow1.innerHTML="<input type='test' name='service' id='service'"+rowsNum+" style='border:0px;width:360px' />";
var addRow2=addRow.insertCell(2);
addRow2.innerHTML="<input type='test' name='sum02' id='sum02'"+rowsNum+" style='border:0px;width:240px' />";
document.getElementById("headlinerow02").rowSpan = rowsNum+1;
}
//窗口表格删除一行
function removeRow02(){
var chkObj=document.getElementsByName("chkArr02");
var productNameObj=document.getElementById("inventoryTable02");
for(var k=0;k<chkObj.length;k++){
if(chkObj[k].checked){
productNameObj.deleteRow(k+1);
k=-1;
}
}
}
</script>
</head>
<body>
<center><h2>发票详细清单</h2><center>
产品销售: <input type="button" value="新增" onclick="addProduct01()"/>
<input type="button" value="删除" onclick="removeRow01();"/>
业务服务: <input type="button" value="新增" onclick="addProduct02()"/>
<input type="button" value="删除" onclick="removeRow02();"/>
<hr/>
<table width="870px" cellpadding="0" cellspacing="0" id="inventoryTable01" border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;text-align:center;">
<tr >
<td id="headlinerow01" style="width:100px;">产品销售</td>
<th style="width:50px;"/>选择</th>
<th style="width:200px;"/>产品名称</th>
<th style="width:200px;"/>规格型号</th>
<th style="width:80px;"/>单位</th>
<th style="width:80px;">数量</th>
<th style="width:80px;">价格</th>
<th style="width:80px;">金额</th>
</tr>
</table>
<table width="870px" cellpadding="0" cellspacing="0" id="inventoryTable02" border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;text-align:center;">
<tr>
<td id="headlinerow02" style="width:100px;">业务服务</td>
<th style="width:50px;"/>选择</th>
<th style="width:400px;"/>服务内容</th>
<th style="width:320px;"/>金额</th>
</tr>
</table>
<table width="870px" cellpadding="0" cellspacing="0" id="inventoryTable03" border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;text-align:center;">
<tr>
<td style="width:100px;">开票内容备注</td>
<td style="width:770px;"><textarea id="remark" wrap="hard" style="border:0px;width:755px;height:100px;"></textarea></td>
</tr>
</table>
<input type="button" value="提交"/>
</body>
</html>
效果图：