正文
<html !doctype> <head> <title>js技术</title> </head> <body> <label for="checkAll">全选</label><input id="checkAll" type="checkbox" class="checkAll"> <label for="checkInvert">反选</label><input id="checkInvert" type="checkbox" class="checkInvert"> <input type="button" value="添加" class="insert"> <input type="button" value="删除" class="remove"> <input type="button" value="复制" class="clone"> <div id="shop"> <div> <input type="checkbox" name="check"> <input type="button" value="+" class="add" name="add"> <input type="text" value="0" class="num" readonly="readonly"> <input type="button" value="-" class="sub"> <input type="text" value="1610" class="price" readonly="readonly"> <input type="text" value="0" class="total" readonly="readonly"> </div> <div> <input type="checkbox" name="check"> <input type="button" value="+" class="add" name="add"> <input type="text" value="0" class="num" readonly="readonly"> <input type="button" value="-" class="sub"> <input type="text" value="6150" class="price" readonly="readonly"> <input type="text" value="0" class="total" readonly="readonly"> </div> <div> <input type="checkbox" name="check"> <input type="button" value="+" class="add" name="add"> <input type="text" value="0" class="num" readonly="readonly"> <input type="button" value="-" class="sub"> <input type="text" value="61410" class="price" readonly="readonly"> <input type="text" value="0" class="total" readonly="readonly"> </div> <div> <input type="checkbox" name="check"> <input type="button" value="+" class="add" name="add"> <input type="text" value="0" class="num" readonly="readonly"> <input type="button" value="-" class="sub"> <input type="text" value="6140" class="price" readonly="readonly"> <input type="text" value="0" class="total" readonly="readonly"> </div> <div> <input type="checkbox" name="check"> <input type="button" value="+" class="add" name="add"> <input type="text" value="0" class="num" readonly="readonly"> <input type="button" value="-" class="sub"> <input type="text" value="6310" class="price" readonly="readonly"> <input type="text" value="0" class="total" readonly="readonly"> </div> <div> <input type="checkbox" name="check"> <input type="button" value="+" class="add" name="add"> <input type="text" value="0" class="num" readonly="readonly"> <input type="button" value="-" class="sub"> <input type="text" value="2610" class="price" readonly="readonly"> <input type="text" value="0" class="total" readonly="readonly"> </div> </div> <label for="totals">总计</label><input readonly="readonly" id="totals" type="text" value="0"> <script> function fun(){ var add=document.getElementsByClassName("add"); var length=add.length; for(var i=0;i<length;i++){ add[i].onclick=function(){ var num=parseInt(this.nextElementSibling.value); num+=1; this.parentNode.children[2].value=num; var price=parseInt(this.parentNode.children[4].value); this.parentNode.lastElementChild.value=num*price; if(this.parentNode.firstElementChild.checked){ var totals=parseInt(document.getElementById("totals").value); document.getElementById("totals").value=totals+price; } } } var sub=document.getElementsByClassName("sub"); for(var i=0;i<sub.length;i++){ sub[i].onclick=function(){ var num=parseInt(this.previousElementSibling.value); if(num>0){ num-=1; this.parentNode.children[2].value=num; var price=this.parentNode.children[4].value; this.parentNode.lastElementChild.value=num*price; if(this.parentNode.firstElementChild.checked){ var totals=parseInt(document.getElementById("totals").value); document.getElementById("totals").value=totals-price; } } } } document.querySelector("#checkAll").onclick=function(){ var check=document.getElementsByName("check"); var length=check.length; var sum=0; for(var i=0;i<length;i++){ check[i].checked=this.checked; if(check[i].checked){ var total=parseInt(check[i].parentNode.lastElementChild.value); sum+=total; } } document.getElementById("totals").value=sum; } document.querySelector("#checkInvert").onclick=function(){ var sum=0; var check=document.getElementsByName("check"); var length=check.length; for(var i=0;i<length;i++){ if(check[i].checked){ check[i].checked=false; }else{ check[i].checked=true; var total=parseInt(check[i].parentNode.lastElementChild.value); sum+=total; } } document.getElementById("totals").value=sum; } var check=document.getElementsByName("check"); var length=check.length; for(var i=0;i<length;i++){ check[i].onclick=function(){ if(this.checked){ var totals=parseInt(document.getElementById("totals").value); var total=parseInt(this.parentNode.lastElementChild.value); document.getElementById("totals").value=total+totals; }else{ var totals=parseInt(document.getElementById("totals").value); var total=parseInt(this.parentNode.lastElementChild.value); document.getElementById("totals").value=totals-total; } } } } document.querySelector(".insert").onclick=function(){ var div=document.createElement("div"); var input=document.createElement("input"); input.setAttribute("type","checkbox"); input.setAttribute("name","check"); div.appendChild(input); var input1=document.createElement("input"); input1.setAttribute("type","button"); input1.value="+"; input1.setAttribute("class","add"); div.appendChild(input1); var input2=document.createElement("input"); input2.setAttribute("type","text"); input2.setAttribute("class","num"); input2.setAttribute("readonly","readonly"); input2.value="0"; div.appendChild(input2); var input3=document.createElement("input"); input3.value="-"; input3.setAttribute("type","button"); input3.setAttribute("class","sub"); div.appendChild(input3); var input4=document.createElement("input"); input4.setAttribute("class","price"); input4.value="3232"; input4.setAttribute("readonly","readonly"); input4.setAttribute("type","text"); div.appendChild(input4); var input5=document.createElement("input"); input5.setAttribute("type","text"); input5.value="0"; input5.setAttribute("class","total"); input5.setAttribute("readonly","readonly"); div.appendChild(input5); var shop=document.getElementById("shop"); shop.appendChild(div); fun(); } document.querySelector(".clone").onclick=function(){ var node=document.getElementById("shop").lastElementChild; var newNode=node.cloneNode(true); var parse=document.getElementById("shop"); parse.appendChild(newNode); fun(); } document.querySelector(".remove").onclick=function(){ var parse=document.getElementById("shop"); var div=parse.children; for(var i=div.length-1;i>=0;i--){ if(div[i].children[0].checked){ parse.removeChild(div[i]); } } } fun(); </script> </body> </html>
js最经典就是dom模型
创建（createElement）、插入(appendChild、insertBefore)、复制（CloneNode）、删除（removeChild）节点及全选与反选
前一个兄弟节点：previousElementSibling
后一个兄弟节点：nextElementSibling
第一个子节点：firstElementChild
最后一个字节点：lastElementChild
父节点：parentNode
所有子节点：children
自定义子节点：children[i]
看一下效果图
