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;
		});