JS dom節點簡單操作
實現的功能：
1.添加圖書到表格中
2.可以刪除某一行
3.可以修改樣式
4.複製最後一行添加到表格中
實現效果如圖所示：
實現代碼：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
function $(str){//這裏簡單封裝一下
str=str.trim();
if(str.length==0)return undefined;
var result=undefined;
if(str[0]=="#"){
result=document.getElementById(str.replace("#",""));
}else if(str[0]=="."){
result=document.getElementsByClassName(str.replace(".",""));
}else{
result=document.getElementsByTagName(str);
}
return result;
}
function add_book(){//添加圖書
var b_name=prompt("請輸入書名：");
var b_price=prompt("請輸入價格：");
var table=$("table")[0].firstElementChild;
var tr=document.createElement("tr");
var td1=document.createElement("td");
td1.innerText=b_name;
tr.appendChild(td1);
var td2=document.createElement("td");
td2.innerText=b_price;
tr.appendChild(td2);
table.appendChild(tr);
}
function del_two(){//刪除第二行
var table=$("table")[0].firstElementChild;
var tr2=table.children[2];
table.removeChild(tr2);
}
function skin(){//更改標題樣式
var table=$("table")[0].getElementsByTagName("tr")[0];
table.style.backgroundColor="black";
table.style.color="#fff";
}
function copy_last(){//複製最後一行
var table=$("table")[0].firstElementChild;
var last=table.children.length-1;
var tr=table.children[last];
var tr_last=tr.cloneNode(true);
table.appendChild(tr_last);
}
</script>
</head>
<body align="center">
<table border="1" align="center">
<tr>
<td width="200">書名</td>
<td width="200">價格</td>
</tr>
<tr>
<td>C從入門到住院</td>
<td>78￥</td>
</tr>
<tr>
<td>集思廣益</td>
<td>89￥</td>
</tr>
<tr>
<td>大成java</td>
<td>99￥</td>
</tr>
<tr>
<td>大數據的智慧</td>
<td>103￥</td>
</tr>
<tr>
<td>語言的藝術</td>
<td>98￥</td>
</tr>
</table>
<hr>
<input type="button" onclick="add_book()" value="增加一行">
<input type="button" onclick="del_two()" value="刪除第2行">
<input type="button" onclick="skin()" value="修改標題樣式">
<input type="button" onclick="copy_last()" value="複製最後一行">
</body>
</html>
//注意：table 下的第一個孩子節點不是tr，而是tbody，下面纔是tr，再下面是td