/ 添加
<head>
<meta charset="UTF-8">
<!--
点击新增一行
-->
<script>
function regForm(){
var username = document.getElementById("uid");
var pwd = document.getElementById("pwd");
var email = document.getElementById("email");
//var msg = "<tr><td>"+username+"</td><td>"+pwd+"</td><td>"+eamail+"</td></tr>";
//document.getElementById("tab").innerHTML += msg;
var tr = document.createElement("tr");
var td1 = document.createElement("td");
td1.innerHTML = username.value;
var td2 = document.createElement("td");
td2.innerHTML = pwd.value;
var td3= document.createElement("td");
td3.innerHTML = email.value;
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
document.getElementById("tab").appendChild(tr);
}
</script>
</head>
<body>
<div id="divId" align="center">
姓名 <input type="text" id="uid" name="unamename" />
密码 <input type="password" id="pwd" name="pwd" />
邮箱 <input type="email" id="email" name="email" /> <br/>
<input type="button" value="提交" οnclick="regForm()"/>
</div>
<hr/>
<div align="center">
<table border="1px" width="43%" id="tab">
<tr>
<td>姓名</td>
<td>密码</td>
<td>邮箱</td>
</tr>
</table>
</div>
</body>
</html>
/ 复选框 选 全选 全不选 反选
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<!--
练习:全选/全部选
-->
<script>
function checkAll(){
var flag = document.getElementById("all").checked; //多选框中有一个属性checked , 点击选中为true, 如果不选中false
var arr = document.getElementsByName("hobby");
for(var i = 0 ; i < arr.length ; i++){
arr[i].checked = flag; //拿到每一个元素都是多选框的对象,也有checked属性
}
}
function ckAll(){
var arr = document.getElementsByName("hobby");
for(var i = 0 ; i < arr.length ; i++){
arr[i].checked = true;
}
}
function disCK(){
var arr = document.getElementsByName("hobby");
for(var i = 0 ; i < arr.length ; i++){
arr[i].checked = false;
}
}
function resverseCK(){
var arr = document.getElementsByName("hobby");
for(var i = 0 ; i < arr.length ; i++){
arr[i].checked = !arr[i].checked;
}
}
</script>
</head>
<body>
全选 <input type="checkbox" id="all" οnclick="checkAll()"/><br/>
篮球: <input type="checkbox" name="hobby"/>
足球: <input type="checkbox" name="hobby"/>
排球: <input type="checkbox" name="hobby"/>
乒乓球: <input type="checkbox" name="hobby"/> <br/>
<input type="button" value="全选" οnclick="ckAll()"/>
<input type="button" value="全不选" οnclick="disCK()"/>
<input type="button" value="反选" οnclick="resverseCK()"/>
</body>
</html>
/ 下拉框选着 并弹出选着的东西
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"/> | |
<!-- | |
得到select下中选中的option中的文本 | |
--> | |
<script> | |
//xml dom的方式实现 | |
function selectStu(){ | |
var sel = document.getElementById("stu"); | |
var index = sel.selectedIndex; | |
var val = sel.options[index].text; | |
alert(val); | |
} | |
</script> | |
</head> | |
<body> | |
<select id= "stu" onchange="selectStu()"> | |
<option value="xiaoxue">小学</option> | |
<option value="chuzhong">初中</option> | |
<option value="gaozhong">高中</option> | |
<option value="daxue">大学</option> | |
</select> | |
</body> | |
</html> | |
///bom 浏览器对象模型 --- 操作window 浏览器窗口 ; location 浏览器地址栏 history 历史浏览记录 dom 文档对象模型