一备韧、標(biāo)簽的追加劫樟、刪除和創(chuàng)建
1.追加
①在標(biāo)簽的內(nèi)容追加：
??1.1 a.append(b) 把b追加到a內(nèi)容的后面
??1.2 a.prepend(b) 把b追加到a內(nèi)容的前面
②在標(biāo)簽的同級追加：
??2.1 a.before(b) 把b追加到a的同級之前
??2.2 a.after(b) 把b追加到a的同級之后
<style>
.warp{
width: 100px;
height: 100px;
border: 1px solid pink;
margin: 0px auto ;
}
.bigwarp{
width: 200px;
height: 200px;
border: 2px solid blue;
margin: 0px auto;
padding-top: 40px;
box-sizing: border-box;
}
.con{
text-align: center;
}
</style>
<body>
<div class="bigwarp">
<div class="warp"></div>
<p class="con">標(biāo)簽的追加</p>
</div>
</body>
<script>
var owarp=document.getElementsByClassName('warp');
var ocon=document.getElementsByClassName('con');
owarp[0].append(ocon[0]);
//owarp[0].preappend(ocon[0]);
//owarp[0].before(ocon[0]);
//owarp[0].after(ocon[0]);
</script>
2.刪除標(biāo)簽
①a.remove()
owarp.remove();
②a.parentNode.removeChild(a);
3.創(chuàng)建：document.createElement('標(biāo)簽名')
結(jié)合上面的例子，給出表格的簡單增加和刪除案例
表格的HTML和CSS樣式直接如下面的代碼所示：
<style>
*{
margin: 0px;
padding: 0px;
list-style: none;
}
td{
border: 1px solid black;
width: 100px;
text-align: center;
}
table{
border-collapse: collapse;
margin: 30px 0px 0px 0px;
}
ul::after{
content: "";
display: block;
clear: both;
}
ul li{
float: left;
margin-right: 10px;
}
#del{
cursor: pointer;
text-decoration: underline;
}
</style>
<body>
<ul>
<li >姓名 ：<input type="text" id="sname"></li>
<li >班級 ：<input type="text" id="sclass"></li>
<li><button id="bot">添加</button></li>
<li><button id="delall">批量刪除</button></li>
</ul>
<table id="warp">
<tr>
<td>選擇</td>
<td>姓名</td>
<td>班級</td>
<td>操作</td>
</tr>
<tr id="deltr">
<td id="box"><input type="checkbox" ></td>
<td>張三</td>
<td>軟件</td>
<td><span id="del">刪除</span></td>
</tr>
</table>
<button id="one">全選</button>
<button id="two">反選</button>
<button id="three">全不選</button>
</body>
一织堂、增加功能
1.創(chuàng)建標(biāo)簽：由效果圖和HTML結(jié)構(gòu)可以看出叠艳，表單是由tblae構(gòu)成，行由tr構(gòu)成易阳，小單元格由td構(gòu)成附较，所以創(chuàng)建標(biāo)簽時只需要創(chuàng)建tr和td即可
// 創(chuàng)建標(biāo)簽
var stutr=document.createElement('tr');
var studel=document.createElement('td');
2.填充內(nèi)容：新創(chuàng)建的標(biāo)簽內(nèi)容是空白的，我們需要往里面填充內(nèi)容潦俺。
①靜態(tài)填充：可以知道操作下的“刪除”是一樣的拒课，直接將整個標(biāo)簽填充即可。
??要注意事示，如果想新創(chuàng)建的標(biāo)簽也和原來的標(biāo)簽擁有同樣的樣式或者事件早像，就要加上相應(yīng)的類名或者事件。比如本例中的 “id=del”
studel.innerHTML='<span id="del">刪除</span>';
②動態(tài)填充：為新的標(biāo)簽填充的姓名和班級的具體數(shù)值來自用戶肖爵，用戶輸入什么就填充什么卢鹦，所以我們需要用“獲取標(biāo)簽.value”來獲取輸入框的內(nèi)容，然后將獲取的內(nèi)容填充到新的標(biāo)簽中劝堪。
??要注意的是sname.value和sclass.value是變量冀自，不能用引號包裹
// 給新的標(biāo)簽加內(nèi)容--輸入框可以通過類名添加，其余文本可以直接作為HTML的內(nèi)容插進(jìn)去
stutr.innerHTML='<td><input type="checkbox"></td><td>'+sname.value+'</td><td>'+sclass.value+'</td>';
3.追加標(biāo)簽
??將上面新創(chuàng)建的標(biāo)簽直接追加在原來標(biāo)簽的后面即可
// 追加標(biāo)簽
stutr.appendChild(studel);
warp.appendChild(stutr);
表單的增加功能就此大功告成秒啦，接下來是單刪除功能
二熬粗、刪除功能
1.刪除單條：
??直接為“刪除”綁定點(diǎn)擊事件，因?yàn)椤皠h除”是用td裝載的余境，所以當(dāng)用戶點(diǎn)擊刪除時驻呐，應(yīng)當(dāng)刪除當(dāng)前td所在的父級tr
//新創(chuàng)建的標(biāo)簽的刪除功能
studel.onclick=function(){
stutr.parentNode.removeChild(stutr);
}
//原本標(biāo)簽的刪除功能
del.onclick=function(){
deltr.parentNode.removeChild(deltr);
}
2.批量刪除
①選框的選中：
全選的思路是遍歷所有的選框，并將check置為true芳来；
全不選的思路是遍歷所有的選框暴氏，并將check置為false；
反選的思路是 首先獲取原本選框的check绣张，通過"!"取反操作即可。
// 選框的內(nèi)容
//全選
one.onclick=function(){
for(var i=0;i<tag.length;i++){
tag[i].checked=true;
}
}
//反選
two.onclick=function(){
for(var i=0;i<tag.length;i++){
tag[i].checked= !tag[i].checked;
}
}
//全不選
three.onclick=function(){
for(var i=0;i<tag.length;i++){
tag[i].checked=false;
}
}
②批量刪除
// 批量刪除
var table = document.getElementsByTagName('table')[0];
var tag=table.getElementsByTagName('input');
// 選擇table中的input
delall.onclick=function(){
if(confirm('確認(rèn)刪除关带？')){
for(var i=0;i<tag.length;i++){
if(tag[i].checked){
tag[i].parentNode.parentNode.parentNode.removeChild(tag[i].parentNode.parentNode);
i--;
}
}
}
}
此外侥涵，為了更加的貼合生活沼撕，下面給出完整的代碼，就多了幾個if語句作為彈出框芜飘。
<script>
bot.onclick=function(){
if((sname.value=='') || (sclass.value=='')) {
alert('姓名和班級不能為空');
// 比較是用==Ｎ癫颉！｀旅鳌Ａぁ！Ｈ⑴啤１记场！Ｊ肌Ｐ阼搿！＜Ｎ杪妗！＞独蟆６角荨！
}
else{
// 創(chuàng)建標(biāo)簽
var stutr=document.createElement('tr');
var studel=document.createElement('td');
// 給新的標(biāo)簽加內(nèi)容--輸入框可以通過類名添加总处，其余文本可以直接作為HTML的內(nèi)容插進(jìn)去
studel.innerHTML='<span id="del">刪除</span>';
stutr.innerHTML='<td><input type="checkbox"></td><td>'+sname.value+'</td><td>'+sclass.value+'</td>';
// 追加標(biāo)簽
stutr.appendChild(studel);
warp.appendChild(stutr);
//刪除標(biāo)簽
studel.onclick=function(){
console.log(11);
stutr.parentNode.removeChild(stutr);
}
// 選框的內(nèi)容
one.onclick=function(){
for(var i=0;i<tag.length;i++){
tag[i].checked=true;
}
}
two.onclick=function(){
for(var i=0;i<tag.length;i++){
tag[i].checked= !tag[i].checked;
}
}
three.onclick=function(){
for(var i=0;i<tag.length;i++){
tag[i].checked=false;
}
}
// 批量刪除
var table = document.getElementsByTagName('table')[0];
var tag=table.getElementsByTagName('input');
// 選擇table中的input
delall.onclick=function(){
if(confirm('確認(rèn)刪除狈惫？')){
for(var i=0;i<tag.length;i++){
if(tag[i].checked){
tag[i].parentNode.parentNode.parentNode.removeChild(tag[i].parentNode.parentNode);
i--;
}
}
}
}
}
}
del.onclick=function(){
deltr.parentNode.removeChild(deltr);
}
</script>
