js操作table

FormHtmlBuilder = function() {};Ext.apply(FormHtmlBuilder.prototype, {buildLeafHtml : function(leaf) {// publicif (leaf.isTable) {return this.tableHtmlGenerate(leaf);} else {return this.listHtmlGenerate(leaf);}},// 表格样式预览tableHtmlGenerate : function(leaf) { // privatevar 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) { // privatevar 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) {// privateswitch (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;});