自定义表格模板

<!DOCTYPE html>
<html lang="zh">
	<head>
		<meta charset="UTF-8" />
		<title>自定义表格模板</title>
		<style>
			html {
				background: #02234C;
			}
			#bar1con3 {
				width: 700px;
				height: 260px;
				border: 1px solid red;
				overflow: auto;
			}
			
			.table {padding: 6px 8px 5px;box-sizing: border-box;color: #fff;}
			.thead .tr .th,.tbody .tr .td {display: inline-block;text-align: center;}
			.thead .tr .th {line-height: 26px;background: #098CF8;}
			.tbody .tr {margin-top: 3px;cursor: pointer;}
			.tbody .tr:nth-child(even) .td {background: #0C3165;}
			.tbody div.act {background: #B6DDF9;}
			.tbody .tr .td {line-height: 27px;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
		</style>
	</head>

	<body>
		<div id="bar1con3">
		</div>
		<script src="js/common/jquery.min.js"></script>
		<script>
			var SDHF = SDHF || {};
			SDHF.showHead = function(_thisid,theadarr) {//显示表头
				var theadhtml='';
				for(var i=0,len=theadarr.length;i<len;i++){
				    theadhtml+='<div class="th w'+i+'">'+theadarr[i]+'</div> ';
				}
				$(_thisid).find('.thead .tr').html(theadhtml);
			};
			SDHF.showW = function(_thisid,warr) {//显示表格每一项宽度
				for(var i=0,len=warr.length;i<len;i++){
				    $(_thisid).find(".w"+i).css("width",warr[i]+'%');
				}
			};
		</script>
		<script>
			show1()

			function show1() {
				var _thisid = "#bar1con3";
				var shtmltable = '';
				shtmltable = '<div class="table">' +
					'		<div class="thead">' +
					'			<div class="tr">' +
					'			</div>' +
					'		</div>' +
					'		<div class="tbody">' +
					'			<div class="tr">' +
					'			</div>' +
					'		</div>' +
					'	</div>';

				$(_thisid).html(shtmltable);
				var headarr = ['反映人', '时间', '受理内容', '诉求分类', '办理部门'];
				SDHF.showHead(_thisid, headarr); //显示项——表头

				var warr = [10, 20, 30, 18, 19];

				var shtml = '';
				for(var i = 0, len = 20; i < len; i++) {
					shtml += '<div class="tr" id="' + i + '">' +
						'			<div class="td w0">张三</div><div class="td w1">' +
						'			2018025.25 12:23</div>' +
						'			<div class="td w2">某街道交通拥堵</div>' +
						'			<div class="td w3">诉求</div>' +
						'			<div class="td w4">市城管执法局</div>' +
						'		</div>';
				}
				$(".tbody").html(shtml);
				SDHF.showW(_thisid, warr);
			}
		</script>
	</body>
</html>
效果：
猜你喜欢
