javascript-dom操作

2022-05-26 124

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： javascript-dom操作

正文

<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>