js操作table

FormHtmlBuilder = function() { }; Ext.apply(FormHtmlBuilder.prototype, { buildLeafHtml : function(leaf) {// public if (leaf.isTable) { return this.tableHtmlGenerate(leaf); } else { return this.listHtmlGenerate(leaf); } }, // 表格样式预览 tableHtmlGenerate : function(leaf) { // private var table = document.createElement('table'); table.border = "1"; table.cellpadding = "0"; table.cellspacing = "0"; table.align = "center"; table.width = "75%"; var tableHead = table.insertRow(table.rows.length); var leafTitle = tableHead.insertCell(tableHead.cells.length); leafTitle.colspan = "2"; leafTitle.innerHTML = leaf.leafName; leafTitle.bgcolor = '#EAF9FE'; leafTitle.height = '30'; for (var i = 0; i < leaf.items.length; i++) { var it = leaf.items[i]; var row = table.insertRow(table.rows.length); var disp = row.insertCell(0); disp.innerHTML = it.dispText; var value = row.insertCell(1); value.innerHTML = this.buildItemHtml(it); if (leaf.isZebraLine) { if (i % 2 == 0) {// 奇数行 row.bgcolor = '#DFE8F6'; } } else { disp.bgcolor = 'CAD4EE'; } } return table.outerHTML; }, // 列表样式预览 listHtmlGenerate : function(leaf) { // private var table = document.createElement('table'); table.border = "1"; table.cellpadding = "0"; table.cellspacing = "0"; table.align = "center"; table.width = "75%"; var table = '<table border="1" cellspacing="0" cellpadding="0" align="center" width="75%"><tr height="30"><td bgcolor="#EAF9FE">{0}</td></tr>{1}</table>'; var trs = ''; for (var i = 0; i < leaf.items.length; i++) { var it = leaf.items[i]; var div_desc = '<div>{0}</div>'; div_desc = String.format(div_desc, it.dispText); var div_value = '<div>{0}</div>'; div_value = String.format(div_value, this.buildItemHtml(it)); var subTable = '<tr><td><table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td align="left">{0}</td></tr><tr><td align="right">{1}</td></tr></table></td></tr>'; if (leaf.isZebraLine) { if (i % 2 == 0) {// 奇数行 var subTable = '<tr><td bgcolor="#DFE8F6"><table border="0" width="100%" cellspacing="0" cellpadding="0"><tr><td align="left">{0}</td></tr><tr><td align="right">{1}</td></tr></table></td></tr>'; } } subTable = String.format(subTable, div_desc, div_value); trs = trs + subTable; } table = String.format(table, leaf.leafName, trs); return table; }, buildItemHtml : function(it) {// private switch (it.inputType) { case 'CONFIRMBTN' :// 确认 return '<input type="button" value="确认">'; case 'TEXT' :// 输入文本 return '<input type="text" name="text" readonly="true">'; case 'DTPICKER' :// 日期控件 return '<input type="text" name="text" readonly="true">'; case 'SELECT' :// 下拉框 return '<select name="select" disabled="true"><option>请选择</option></select>'; case 'CHECKBOX' :// 多选 return '<input type="check" name="check">'; case 'RADIO' :// 单选 return '<input type="radio" name="radio">'; case 'SELF' :// 自定义按钮 return '<input type="button" value="按钮" name="self">'; case 'EXEC' :// 检查项 return '<input type="radio" name="check" value="正常" disabled="true">'; } } }); Ext.onReady(function() { var html = new FormHtmlBuilder().buildLeafHtml(parent.currentLeaf); document.getElementById('leaf-body').innerHTML = html; });