homework04.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#data {
				border-collapse: collapse;
			}
			#data td, #data th {
				width: 120px;
				height: 40px;
				text-align: center;
				border: 1px solid black;
			}
			#buttons {
				margin: 10px 0;
			}
		</style>
	</head>
	<body>
		<table id="data">
			<caption>数据统计表</caption>
			<tbody>
			<tr>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
				<th>身高</th>
				<th>体重</th>
			</tr>
			<tr>
				<td>Item1</td>
				<td>Item2</td>
				<td>Item3</td>
				<td>Item4</td>
				<td>Item5</td>
			</tr>
			<tr>
				<td>Item1</td>
				<td>Item2</td>
				<td>Item3</td>
				<td>Item4</td>
				<td>Item5</td>
			</tr>
			<tr>
				<td>Item1</td>
				<td>Item2</td>
				<td>Item3</td>
				<td>Item4</td>
				<td>Item5</td>
			</tr>
			<tr>
				<td>Item1</td>
				<td>Item2</td>
				<td>Item3</td>
				<td>Item4</td>
				<td>Item5</td>
			</tr>
			<tr>
				<td>Item1</td>
				<td>Item2</td>
				<td>Item3</td>
				<td>Item4</td>
				<td>Item5</td>
			</tr>
			<tr>
				<td>Item1</td>
				<td>Item2</td>
				<td>Item3</td>
				<td>Item4</td>
				<td>Item5</td>
			</tr>
			</tbody>
		</table>
		<div id="buttons">
			<button id="pretty">隔行换色</button>
			<button id="clear">清除数据</button>
			<button id="remove">删单元格</button>
			<button id="hide">隐藏表格</button>
		</div>
		<script src="js/mylib.js"></script>
		<script>
			function prettify() {
				var trs = document.querySelectorAll('#data tr');
				for (var i = 1; i < trs.length; i += 1) {
					trs[i].style.backgroundColor = 
						i % 2 == 0 ? 'lightgray' : 'lightsteelblue';
				}
			}
			
			function clear() {
				var tds = document.querySelectorAll('#data td');
				for (var i = 0; i < tds.length; i += 1) {
					tds[i].textContent = '';
				}
			}
			
			function removeLastRow() {
				var table = document.getElementById('data');
				if (table.rows.length > 1) {
					table.deleteRow(table.rows.length - 1);
				}
			}
			
			function hideTable() {
				var table = document.getElementById('data');
				table.style.visibility = 'hidden';
			}
			
			+function() {
				var prettyBtn = document.querySelector('#pretty');
				prettyBtn.addEventListener('click', prettify)
				var clearBtn = document.querySelector('#clear');
				clearBtn.addEventListener('click', clear);
				var removeBtn = document.querySelector('#remove');
				removeBtn.addEventListener('click', removeLastRow);
				var hideBtn = document.querySelector('#hide');
				hideBtn.addEventListener('click', hideTable);
			}();
		</script>
	</body>
</html>