js动态添加实现简单的部分购物车功能 demo
js动态添加实现简单的部分购物车功能
首先了解添加删除元素：
创建新的 HTML 元素 - appendChild()
如需向 HTML DOM 添加新元素，首先必须创建该元素，然后把它追加到已有的元素上。
例：
<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>
<script>
// 创建新元素 只在内存中
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
// 元素添加到DOM树上
para.appendChild(node);
var element=document.getElementById("d1");
element.appendChild(para);
</script>
效果：
This is a paragraph.
This is another paragraph.
This is new.
删除 HTML 元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除元素</title>
</head>
<body>
<div>
<strong>strong</strong>
<i>i</i>
<p>p</p>
</div>
<script>
var div = document.getElementsByTagName("div")[0];
var p = document.getElementsByTagName("p")[0];
var strong = document.getElementsByTagName("strong")[0];
// 通过父元素删除
div.removeChild(p);
// 自己删除自己
strong.remove();
</script>
</body>
</html>
querySelector() 选择器语法
语法
“element = baseElement.querySelector(selectors);”
element 和 baseElement 是 element 对象.
selectors 是一个CSS选择器字符串( selectors )
参数 selectors
一组用来匹配Element baseElement后代元素的选择器selectors；必须是合法的css选择器，否则会引起语法错误。返回匹配指定选择器的第一个元素。
返回值
基础元素（baseElement）的子元素中满足指定选择器组的第一个元素。匹配过程会对整个结构进行，包括基础元素和他的后代元素的集合以外的元素，也就是说，选择器首先会应用到整个文档，而不是基础元素，来创建一个可能有匹配元素的初始列表。然后从结果元素中检查它们是否是基础元素的后代元素。第一个匹配的元素将会被querySelector()方法返回。
如果没有找到匹配项，返回值为null。
异常 SyntaxError
指定的选择器无效。
例：下面例子会用到的两个选择器：
”:not(selector) :not(p) 选择每个并非p元素的元素”
”:checked input:checked 选择每个选中的输入元素”
开始js动态添加实现简单的部分购物车功能
全选 删除 批量删除操作
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{
padding: 0;
margin: 0;
}
ul{
height: 30px;
text-align: center;
}
ul li{
float: left;
list-style: none;
width: 120px;
border: 2px solid plum;
color:sienna;
box-shadow: 0px 0px 8px 2px palegoldenrod inset;
}
.ul_thead{
font-weight: bold;
font-size: 20px;
font-family: Georgia, 'Times New Roman', Times, serif;
}
a{
color: teal;
}
button{
border:3px solid lightpink;
background-color:linen;
border-radius: 8px;
color:rgb(29, 109, 109);
font-size: 20px;
font-weight: bold;
font-family: Georgia, 'Times New Roman', Times, serif;
}
</style>
<body>
<div id="data">
</div>
<button>批量删除</button>
<script>
var json = '[{"ename" : "John", "salary" : 6000, "age" : 20},{"ename" : "Ella", "salary" : 10000, "age" : 25},{"ename" : "Jack", "salary" : 5000, "age" : 18},{"ename" : "Chen", "salary" :106000, "age" : 30}]';
console.log(JSON.parse(json));
var arr = JSON.parse(json);
// 1、模拟后台的发送过来的数据，更新到DOM树上
//创建新元素
//获取父元素
var div = document.getElementById("data");
//创建标题
var ul_thead = document.createElement("ul");
//给表头ul类名
ul_thead.className = "ul_thead";
//全选
//创建复选框li
var li_selAll = document.createElement("li");
//创建复选框
var inp = document.createElement("input");
inp.id = "selAll";
inp.type = "checkbox";
//复选框追加到li
li_selAll.appendChild(inp);
//创建文本
var label = document.createElement("label");
label.innerText = "全选";
//文本和复选框的关联
label.setAttribute("for","selAll");
//文本追加到li
li_selAll.appendChild(label);
//li追加到ul上
ul_thead.appendChild(li_selAll);
//标题内容
for (var n in arr[0]){
var li = document.createElement("li");
li.innerText = n;
ul_thead.appendChild(li);
}
//创建操作
var li = document.createElement("li");
li.innerText = "操作";
ul_thead.appendChild(li);
//追加到页面
div.appendChild(ul_thead);
//创建文档片段
var frag = document.createDocumentFragment();
//创建内容
for(var i = 0; i < arr.length; i++){//列
//创建ul
var ul_tbody = document.createElement("ul");
//创建复选框li
var li_sel = document.createElement("li");
//复选框
var inpchk = document.createElement("input");
inpchk.type = "checkbox";
//复选框追加到li
li_sel.appendChild(inpchk);
//li追加到ul上
ul_tbody.appendChild(li_sel);
//添加数据
for(var key in arr[i]){//行
//创建li
var li_tobody = document.createElement("li");
li_tobody.innerText = arr[i][key];
ul_tbody.appendChild(li_tobody);
}
//创建删除操作
//创建删除li
var li_del = document.createElement("li");
//创建a标签
var a = document.createElement("a");
a.innerHTML = "删除";
a.href = "#";
//a标签追加到li上
li_del.appendChild(a);
//操作追加到ul上
ul_tbody.appendChild(li_del);
//把内容追加到文档片段上
frag.appendChild(ul_tbody);
}
//把数据追加到父元素
div.appendChild(frag);
// 2、全选功能
//找到除了第一行以外的所有复选框
var chk = document.querySelectorAll("ul:not(.ul_thead) input");
//找到第一行的复选框
var chkall = document.getElementById("selAll");
// 第一行第一个li的点击事件（全选点击事件）
li_selAll.onclick = function(){
//全选
for(var i = 0; i < chk.length; i++){
chk[i].checked = chkall.checked;
}
}
//当前复选框点击事件
for(var j = 0; j < chk.length; j++){
chk[j].onclick = check;
}
//复选框点击事件方法
function check(){
//如果当前元素选中
if(this.checked){
//找到除了第一行以外没有选中的复选框
var chk_nocheck = document.querySelectorAll("ul:not(.ul_thead) input:not(:checked");
//如果长度为0 都选中
if(chk_nocheck.length == 0){
// 全选选中
chkall.checked = true;
}else{
// 全选取消
chkall.checked = false;
}
}else{//当前元素未选中
// 将全选取消
chkall.checked = false;
}
}
//3、删除
//单个删除
//获取a标签
var del = document.getElementsByTagName("a");
//点击 删除操作
for(var i = 0; i < del.length; i++){
del[i].onclick = function(){
this.parentElement.parentElement.remove();
}
}
//批量删除
//按钮点击事件
document.getElementsByTagName("button")[0].onclick = function(){
//找到除了第一行以外选中的复选框
var chk_check = document.querySelectorAll("ul:not(.ul_thead) input:checked");
//如果没有选中数据提示
if(chk_check.length == 0){
alert("请选择需要删除的数据！！！");
}else{//否则
//进行批量删除
for(var n = 0; n < chk_check.length; n++){
chk_check[n].parentElement.parentElement.remove();
}
}
}
</script>
</body>
</html>
效果：
