JSFiddle - React, Tailwind, and code Playground

by tu genhua

HTML

<table cellspacing = "0" cellpadding = "0">
		<thead>
			<tr>
				<!--<th width="5%">选择</th> -->
				<th width="20%">表格控件1</th>
				<th width="10%">表格控件2</th>
				<th width="20%">表格控件3</th>
				<th width="20%">表格控件4</th>
				<th width="15%">表格控件5</th>
				<th width="15%">表格控件6</th>
			</tr>
		</thead>
		<tbody id="j-tbody">
			
		</tbody>
	</table>

CSS

table {
		width:100%;
		border:1px solid #ccc;
		border-right:none;
		border-bottom:none;
	}
	table thead th {
		font-size:14px;
		color: #333;
		font-weight:normal;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
	}
	table td{
		font-size:12px;
		color: #333;
		font-weight:normal;
		border-right:1px solid #ccc;
		border-bottom:1px solid #ccc;
		text-align:center;
	}

JavaScript

/**
 * 简单的表格json数据展示
 * @time 2014-4-23
 * var data = [
		{"parentId":9944267,"categoryName":"创建交易","categoryId":9944343},
		{"parentId":9944267,"categoryName":"支付","categoryId":9944344},
		{"parentId":9944267,"categoryName":"退款","categoryId":9944344},
		{"parentId":9944267,"categoryName":"退款","categoryId":9944344},
		{"parentId":9944267,"categoryName":"退款","categoryId":9944344},
		{"parentId":9944267,"categoryName":"退款","categoryId":9944344}];
 */

 function TableData(options) {
	
	this.config = {
		container     :  '#j-tbody',         // 默认tbody容器
		JSONData      :  '',                 // json数据
		isRadio       :  false,               // 是否单选
		isCheck       : false,				 // 是否多选
		callback      : null
	};

	this.cache = {
		
	};

	this.init(options);
 }

 TableData.prototype = {

	constructor: TableData,

	init: function(options) {
		this.config = $.extend(this.config,options || {});
		var self = this,
			_config = self.config;

		// 渲染表格数据
		self._renderHTML();
	},
	/*
	 * 渲染tbody里面的数据
	 * @method _renderHTML
	 * @private
	 */
	_renderHTML: function() {
		var self = this,
			_config = self.config;

		// 先清空
		$(_config.container).html('');
		for(var i = 0; i < _config.JSONData.length; i++) {
			var tr = document.createElement("tr"),
				arrs = self._returnArrs(_config.JSONData[i]);
			for(var j = 0; j < arrs.length; j++) {
				var td = document.createElement('td');
				$(td).html(arrs[j]);
				tr.appendChild(td);
			}
			if(_config.isRadio) {
				var radio = $('<td><input type="radio" class=""/></td>');
				$(tr).prepend(radio);
			}
			if(_config.isCheck) {
				var radio = $('<td><input type="checkbox" class=""/></td>');
				$(tr).prepend(radio);
			}
			$(_config.container)[0].appendChild(tr);
		}
		
		// 一次性插入数据
		
		_config.callback && $.isFunction(_config.callback) && _config.callback();
	},
	/*
	 * 返回数组
	 * @private _returnArrs
	 * @return {arrs} 返回数组
	 */
	_returnArrs: function(obj){
		var arrs = [];
		for(var k in obj) {
			if(obj.hasOwnProperty(k))...