JavaScript生成表格问题

像这样的一个表格怎么生成，数据是从数据库读出。产品包括子产品，每个子产品还对应多个序列号。
产品还有可能有多个，不是只有产品一，而且数量是不确定的，需要动态生成。

解决方案 »

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

方法1.在页面代码中插入服务端代码，遍历服务端数组生成初始html，比较简单，推荐
方法2.将数据用json格式传递到客户端，客户端用js动态生成表格的行列，建议使用jquery，这样操作html简单些并且兼容性比较好
这个要用table的话不太好生成哦。建议用div或者ul，li什么的结构很清晰就方便遍历了。
<div>
  <div>产品一</div>
  <div>
    
<div>子产品</div>
<div>
  
  <div>序列号</div>
  
</div>
    
  </div>
</div>
这中结构就可以的。至于样式，楼主就自己写吧。
写死的，如果需要提方法再说<!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>