JavaScript生成表格问题
像这样的一个表格怎么生成，数据是从数据库读出。产品包括子产品，每个子产品还对应多个序列号。
产品还有可能有多个，不是只有产品一，而且数量是不确定的，需要动态生成。
[解决办法]
方法1.在页面代码中插入服务端代码，遍历服务端数组生成初始html，比较简单，推荐
方法2.将数据用json格式传递到客户端，客户端用js动态生成表格的行列，建议使用jquery，这样操作html简单些并且兼容性比较好
[解决办法]
这个要用table的话不太好生成哦。建议用div或者ul，li什么的结构很清晰就方便遍历了。
<!--foreach 产品-->
<div>
<div>产品一</div>
<div>
<!--foreach 子产品-->
<div>子产品</div>
<div>
<!--foreach 序列号-->
<div>序列号</div>
<!--foreach 序列号 end-->
</div>
<!--foreach 子产品 end-->
</div>
</div>
这中结构就可以的。至于样式，楼主就自己写吧。
<!--foreach 产品 end-->
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
var data = [
{
name:'a',
child:[
{name:'a1', child:[
{name:'a11'},
{name:'a12'}
]},
{name:'a2', child:[
{name:'a21'},
{name:'a22'},
{name:'a23'}
]}
]
},
{
name:'b',
child:[
{name:'b1', child:[
{name:'b11'},
{name:'b12'}
]},
{name:'b2', child:[
{name:'b21'}
]}
]
}
];
$(function () {
for (var i = 0; i < data.length; i++) {
var col = 0;
var table = document.getElementById('grid');
var tr = table.insertRow(table.rows.length);
var td1 = tr.insertCell(0);
td1.innerHTML = data[i].name;
for (var j = 0; j < data[i].child.length; j++) {
col += data[i].child[j].child.length;
if (j > 0) {
tr = table.insertRow(table.rows.length);
}
var td2 = tr.insertCell(tr.cells.length);
td2.innerHTML = data[i].child[j].name;
td2.rowSpan = data[i].child[j].child.length;
for (var q = 0; q < data[i].child[j].child.length; q++) {
if (q > 0) {
tr = table.insertRow(table.rows.length);
}
var td3 = tr.insertCell(tr.cells.length);
td3.innerHTML = data[i].child[j].child[q].name;
}
}
td1.rowSpan = col;
}
});
</script>
</head>
<body>
<table id="grid" border="1"></table>
</body>
</html>
<TABLE id="tab1" width="300" border="1" bordercolor="gray" style="border-collapse:collapse">
<TR>
<TH>产品系列</TH>
<TH>子产品</TH>
<TH>序列号</TH>
</TR>
</TABLE>
<SCRIPT LANGUAGE="JavaScript">
var data = new Array();
data[0] = ["产品一", "子产品1", "序列号1"];
data[1] = ["产品一", "子产品1", "序列号2"];
data[2] = ["产品一", "子产品1", "序列号3"];
data[3] = ["产品一", "子产品2", "序列号4"];
data[4] = ["产品一", "子产品2", "序列号5"];
data[5] = ["产品一", "子产品3", "序列号6"];
data[6] = ["产品一", "子产品3", "序列号7"];
data[7] = ["产品一", "子产品3", "序列号8"];
data[8] = ["产品一", "子产品3", "序列号9"];
data[9] = ["产品二", "子产品1", "序列号10"];
data[10] = ["产品二", "子产品2", "序列号11"];
data[11] = ["产品二", "子产品2", "序列号12"];
var tab1 = document.getElementById("tab1");
//画表
for (var i=0; i<data.length; i++)
{
var newrow = tab1.insertRow();
for (var j=0; j<data[i].length; j++)
{
var newcell = newrow.insertCell();
newcell.innerHTML = data[i][j];
}
}
//合并同类项
for (var i=tab1.rows.length-1; i>0; i--)
{
for (var j=tab1.rows(i).cells.length-1; j>=0; j--)
{
if (tab1.rows(i).cells(j).innerText == tab1.rows(i-1).cells(j).innerText)
{
tab1.rows(i-1).cells(j).rowSpan += tab1.rows(i).cells(j).rowSpan;
tab1.rows(i).removeChild(tab1.rows(i).cells(j));
}
}
}
</SCRIPT>
