web页面表格、复选框、调整列宽——20181126

数据解析后，根据数据内容在页面上通过表格显示出来，同时添加了复选框和修改列宽的内容。
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
	<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>

<body onload="init()">

	<table id="tab_1" border="1" white-space="nowrap" style="margin:auto">
		<thead>
			<tr>
				<th style="width: 100px; text-align:center">数据名称</th>
				<th style="width: 100px; text-align:center">数据大小</th>
				<th style="width: 100px; text-align:center">数据来源</th>
				<th style="width: 100px; text-align:center">上传时间</th>
			</tr>
		</thead>
		<tbody id="tableTbody">
		</tbody>
	</table>
	
	<script>
	function dataSet(name,size,source,time){
		this.name = name;
		this.size = size;
		this.source = source;
		this.time = time;
	}
	var topologyData = new Set();
	topologyData.add(new dataSet("长三角1","100kb","李明","20181020"));
	topologyData.add(new dataSet("长三角2","800kb","张三","20181021"));
	topologyData.add(new dataSet("长三角3","1800kb","李四","20181022"));
	topologyData.add(new dataSet("长三角4","600kb","王麻子","20181023"));
	


	//初始化
	function init(){
		showData();
		initTableCheckbox();
		initTableColumnWidth();
	}
	//创建表格
	function showData(){
	var str = '';
	var $tbr = $('table tbody');
	topologyData.forEach(function(data){
			console.info( data.name + ":" + data.size);
			str = '<tr><td style="text-align:left">' + data.name + '</td><td style="text-align:right">' + data.size + '</td><td style="text-align:right">' + data.source + '</td><td style="text-align:right">' + data.time + '</td></tr>';
		    $tbr.append(str);
			//$("#tableTbody").append(str);	
	});
    }

    //添加表格复选框
	function initTableCheckbox() {
		console.info("添加表格复选框——开始");
		/*将全选/反选复选框添加到表头最前，即增加一列*/
		var $thr = $('table thead tr');
		var $checkAllTh = $('<th><input type="checkbox" id="checkAll" name="checkAll" /></th>');
		$thr.prepend($checkAllTh);
		
		/*“全选/反选”复选框*/
		var $checkAll = $thr.find('input');
		$checkAll.click(function(event){
			/*将所有行的选中状态设成全选框的选中状态*/
			$tbr.find('input').prop('checked',$(this).prop('checked'));
			/*并调整所有选中行的CSS样式*/
			if ($(this).prop('checked')) {
				$tbr.find('input').parent().parent().addClass('warning');
			} else{
				$tbr.find('input').parent().parent().removeClass('warning');
			}
			/*阻止向上冒泡，以防再次触发点击操作*/
			event.stopPropagation();
		});
		
		
		/*点击全选框所在单元格时也触发全选框的点击操作*/
		$checkAllTh.click(function(){
			$(this).find('input').click();
		});
		
		
		var $tbr = $('table tbody tr');
		var $checkItemTd = $('<td><input type="checkbox" name="checkItem" /></td>');
		/*每一行都在最前面插入一个选中复选框的单元格*/
		$tbr.prepend($checkItemTd);
		/*点击每一行的选中复选框时*/
		$tbr.find('input').click(function(event){
			/*调整选中行的CSS样式*/
			$(this).parent().parent().toggleClass('warning');
			/*如果已经被选中行的行数等于表格的数据行数，将全选框设为选中状态，否则设为未选中状态*/
			$checkAll.prop('checked',$tbr.find('input:checked').length == $tbr.length ? true : false);
			/*阻止向上冒泡，以防再次触发点击操作*/
			event.stopPropagation();
		});
		
		/*点击每一行时也触发该行的选中操作*/
		$tbr.click(function(){
			$(this).find('input').click();
		});
		console.info("添加表格复选框——结束");
	}

	
    //调整列宽
	function initTableColumnWidth(){
		var tTD; //用来存储当前更改宽度的Table Cell,避免快速移动鼠标的问题 
		var table = document.getElementById("tab_1"); 
		for (j = 0; j < table.rows[0].cells.length; j++) { 
		
			table.rows[0].cells[j].onmousedown = function () { 
				//记录单元格 
				tTD = this; 
				if (event.offsetX > tTD.offsetWidth - 10) { 
					tTD.mouseDown = true; 
					tTD.oldX = event.x; 
					tTD.oldWidth = tTD.offsetWidth; 
				}
			}; 
		
			table.rows[0].cells[j].onmouseup = function () { 
				//结束宽度调整 
				if (tTD == undefined) tTD = this; 
				tTD.mouseDown = false; 
				tTD.style.cursor = 'default'; 
			}; 
		
			table.rows[0].cells[j].onmousemove = function () { 
				//更改鼠标样式 
				if (event.offsetX > this.offsetWidth - 10) 
					this.style.cursor = 'col-resize'; 
				else 
					this.style.cursor = 'default'; 
				//取出暂存的Table Cell 
				if (tTD == undefined)
					tTD = this; 
				//调整宽度 
				if (tTD.mouseDown != null && tTD.mouseDown == true) { 
					tTD.style.cursor = 'default'; 
					if (tTD.oldWidth + (event.x - tTD.oldX)>0) 
						tTD.width = tTD.oldWidth + (event.x - tTD.oldX); 
					//调整列宽 
					tTD.style.width = tTD.width; 
					tTD.style.cursor = 'col-resize'; 
					//调整该列中的每个Cell 
					table = tTD;
					while (table.tagName != 'TABLE') 
						table = table.parentElement; 
					for (var j = 0; j < table.rows.length; j++) { 
						table.rows[j].cells[tTD.cellIndex].width = tTD.width;
					} 
				} 
			}; 
		}
	}
	</script>
</body>
</html>
web页面表格、复选框、调整列宽——20181126

猜你喜欢
