【web前端(三十六)】javascript_高级部分_表格案例

外部js文件 

window.onload = function() {
	console.log("页面加载完成");
	//找到第一个按钮
	var btn = document.getElementsByTagName("button")[0];
	//	//找到第二个按钮
	var btn1 = document.getElementsByTagName("button")[1];
	console.log(btn);
	btn.onclick = function() {
		alert("追加成功！");
		//找到tbody标签
		var tbdoy = document.getElementsByName("tbody")[0];
		//创建表行
		var tr = document.createElement("tr");
		for(var j = 0; j < 4; j++) {
			var td = document.createElement("td");
			if(j == 0) {
				var inp = document.createElement("input");
				inp.setAttribute("type", "checkbox");
				td.appendChild(inp);
			} else {
				td.innerHTML = "数据库内容";
			}
			tr.appendChild(td);
		}
		tbody.appendChild(tr);
	}

	//给btn1第二个按钮加事件
	btn1.onclick = function() {
		var div = document.getElementById("tab1");
		div.setAttribute("class", "abc");
	}

	///文档对象模型
	var sel = document.getElementById("year");
	for(var i = 1990; i < 2100; i++) {
		/*创建新对象*/
		var y = document.createElement("option");
		/*用文档对象模型往里头追加*/
		y.setAttribute("value", i);
		y.textContent = i;
		sel.appendChild(y);
	}

	sel.onchange = function() {
		alert(sel.children[sel.selectedIndex].innerHTML);
	}

	///浏览器对象模型
	//	var sel = document.getElementById("year");
	//	for(var i = 1997; i < 2070; i++) {
	//		sel.options.add(new Option(i, i));
	//	}
	//
	//	sel.onchange = function() {
	//		alert(sel.options[sel.selectedIndex].innerHTML);
	//	}

	//在id=tab1的标签中添加一个表格
	var tab1 = document.getElementById("tab1");
	var table = document.createElement("table");
	table.setAttribute("width", "300");
	table.setAttribute("cellspacing", "0"); { //table中添加thead和tbody标签
		var thead = document.createElement("thead");
		var tbody = document.createElement("tbody");
		table.appendChild(thead);
		table.appendChild(tbody);
		//给thead追加tr标签
		var tr1 = document.createElement("tr");
		thead.appendChild(tr1);
		//给thead的tr标签添加th标签
		var th1 = document.createElement("th");
		tr1.appendChild(th1);
		//给th1添加input标签
		input = document.createElement("input");
		th1.appendChild(input);
		input.setAttribute("type", "checkbox");

		for(var i = 0; i < 3; i++) {
			var th = document.createElement("th");
			th.innerHTML = "标题" + i;
			tr1.appendChild(th);
		}
		//给tbody追加tr标签
		for(var i = 0; i < 10; i++) {
			var tr = document.createElement("tr");
			for(var j = 0; j < 4; j++) {
				var td = document.createElement("td");
				if(j == 0) {
					var inp = document.createElement("input");
					inp.setAttribute("type", "checkbox");
					td.appendChild(inp);
				} else {
					td.innerHTML = "数据库内容";
				}
				tr.appendChild(td);
			}
			tbody.appendChild(tr);
		}
	}
	console.log(tab1);
	tab1.appendChild(table);
	//找到第一个type=chkbox的input标签
	var chk1 = document.getElementsByTagName("input")[0];
	chk1.onclick = function() {
		//取到所有input标签的引用的集合
		var chks = document.getElementsByTagName("input");
		//遍历除了第一个外其它的input标签
		for(var i = 1; i < chks.length; i++) {
			chks[i].checked = chk1.checked;
		}
	}
};

 

HTML文件 

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			table {
				border: 1px solid #000000;
				border-collapse: collapse;
			}
			
			td,
			th {
				border: 1px solid #000000;
			}
		</style>

		<link type="text/css" rel="stylesheet" href="../css/my.css" />
		<script type="text/javascript" src="../js/js2.js"></script>
	</head>

	<body>
		<button>追加</button>
		<button>上色</button>

		<select id="year">
			<option value="1996" selected="true">一九九六</option>
		</select>

		<div id="tab1">

		</div>
	</body>

</html>