<!DOCTYPE?html>
<html>
<head>
????<title>?new?document?</title>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=gbk"/>
????<script?type="text/javascript">
????????????//?鼠標移動改變背景,可以通過給每行綁定鼠標移上事件和鼠標移除事件來改變所在行背景色。
????????//?編寫一個函數,供添加按鈕調用,動態在表格的最后一行添加子節點;
????????function?add1(){
????????????var?tab=document.getElementById("table");
????????????var?tr=document.createElement("tr");
????????????var?td=document.createElement("td");
????????????td.innerHTML="<input?type='text'?value='請輸入學號'?onfocus='del2()'?onblur='del3()'>";
????????????tr.appendChild(td);
????????????var?td=document.createElement("td");
????????????td.innerHTML="<input?type='text'?value='請輸入學生姓名'?>";
????????????tr.appendChild(td);
????????????var?td=document.createElement("td");
????????????td.innerHTML="<a?href='#'?onclick='del(this)'>刪除</a>";
????????????tr.appendChild(td);
????????????tab.appendChild(tr);
????????????function?del2(){
????????????????alert("123");
????????????};
????????????function?del3(){
????????????????alert("123");
????????????};
????????????var?trs?=?document.getElementsByTagName("tr");
????????????for?(var?i?=?1;?i?<?trs.length;?i++)?{
????????????????trs[i].onmouseover?=?function?colorChange()?{
????????????????????this.style.backgroundColor?=?"#f2f2f2";
????????????????};
????????????????trs[i].onmouseout?=?function?colorReset()?{
????????????????????this.style.backgroundColor?=?"#fff";
????????????????};
????????????};
????????};
????????window.onload?=?function()?{
????????????var?trs?=?document.getElementsByTagName("tr");
????????????for?(var?i?=?1;?i?<?trs.length;?i++)?{
????????????????trs[i].onmouseover?=?function?colorChange()?{
????????????????????this.style.backgroundColor?=?"#f2f2f2";
????????????????};
????????????????trs[i].onmouseout?=?function?colorReset()?{
????????????????????this.style.backgroundColor?=?"#fff";
????????????????};
????????????};
????????};
????????//?創建刪除函數
????????function?del(obj){
????????????var?dtr=obj.parentElement.parentElement;
????????????dtr.parentElement.removeChild(dtr);
????????};
????</script>
????<style>
????????a{
?????????color:?blue;
????????}
????</style>
</head>
<body>
<table?border="1"?width="50%"?id="table">
????<tr>
????????<th>學號</th>
????????<th>姓名</th>
????????<th>操作</th>
????</tr>
????<tr>
????????<td>xh001</td>
????????<td>王小明</td>
????????<td><a?href="javascript:;"?onclick='del(this)'>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
????<tr>
????????<td>xh002</td>
????????<td>劉小芳</td>
????????<td><a?href="javascript:;"?onclick='del(this)'>刪除</a></td>???<!--在刪除按鈕上添加點擊事件??-->
????</tr>
</table>
<input?type="button"?value="添加一行"?onclick="add1()"?/>???<!--在添加按鈕上添加點擊事件??-->
</body>
</html>
2018-10-22
換成placeholder="