外部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>