JavaScript生成表格问题

cainqs 2013-03-27 12:35:11

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

...全文

125 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

碧海情天-赵亮 2013-03-27

打赏
举报

去看看ExtJS的表格示例

zyzy15 2013-03-27

打赏
举报


 <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>

gr1532879 2013-03-27

打赏
举报

写死的，如果需要提方法再说


<!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>

地狱羔羊 2013-03-27

打赏
举报

这个要用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-->