使用jquery进行节点的删除操作
jquery-3.3.1.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
body{
margin: 0;
}
table{
margin: 50px auto;
border: 1px solid #000;
width: 600px;
min-height: 40px;
border-collapse: collapse;
}
thead>tr{
background: #eee;
}
td{
border: 1px solid #666;
text-align: center;
}
a{
color: blue;
cursor: pointer;
}
</style>
<script src="js/data.js"></script>
<script src="js/jquery-3.3.1.js"></script>
</head>
<body>
<table>
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>颜色</th>
<th>价格</th>
<th>销量</th>
<th>操作</th>
</tr>
</thead>
<tbody></tbody>
</table>
<script>
$(function(){
$.each(data,function(i,v) {
var $td = $('<td>'+(i+1)+'</td>');
var $tr = $('<tr></tr>');
$td.appendTo($tr);
$.each(v,function(i, v) {
var $td = $('<td>'+v+'</td>');
$td.appendTo($tr);
});
var $a = $('<a>删除</a>');
var $td = $('<td></td>');
$a.click(function() {
$(this).parents('tr').remove();
});
$a.appendTo($td);
$td.appendTo($tr);
$tr.appendTo($('tbody'));
});
})
</script>
</body>
</html>
下面是使用原生js写的
<script>
var table = one('table');
var tbody = one('tbody');
for (var i = 0; i < data.length; i++) {
var tr = document.createElement('tr');
var td = document.createElement('td');
td.innerHTML = data[i].name;
tr.appendChild(td);
var td = document.createElement('td');
td.innerHTML = data[i].color;
tr.appendChild(td);
var td = document.createElement('td');
td.innerHTML = data[i].price;
tr.appendChild(td);
var td = document.createElement('td');
td.innerHTML = data[i].sales;
tr.appendChild(td);
var td = document.createElement('td');
td.classList.add('active');
td.innerHTML = '删除';
tr.appendChild(td);
tbody.appendChild(tr);
}
var tds = all('tbody tr .active');
var trs = all('tbody tr');
for (var i = 0; i < data.length; i++) {
tds[i].onclick = function(){
this.parentNode.remove();
}
}
</script>
data.js
var data = [
{
name:"华为",
color:"黑色",
price:599,
sales:100
},
{
name:"苹果",
color:"粉色",
price:66999,
sales:1008
},
{
name:"三星",
color:"金色",
price:35999,
sales:196
},
{
name:"小米",
color:"蓝色",
price:28999,
sales:10600
},
{
name:"红米",
color:"红色",
price:9199,
sales:1002
},
{
name:"白米",
color:"白色",
price:2949,
sales:10600
},
{
name:"黄米",
color:"黄色",
price:2199,
sales:3220
},
{
name:"大米",
color:"紫色",
price:9977,
sales:110
},
{
name:"诺基亚",
color:"蓝色",
price:1994,
sales:10000
},
{
name:"平板",
color:"绿色",
price:29919,
sales:100
},
{
name:"华为",
color:"黑色",
price:599,
sales:1500
},
{
name:"苹果",
color:"灰色",
price:69799,
sales:1009
},
{
name:"三星",
color:"金黄色",
price:3969,
sales:135
},
{
name:"小米",
color:"蓝紫色",
price:21999,
sales:1030
},
{
name:"红米",
color:"红绿色",
price:9929,
sales:1002
},
{
name:"白米",
color:"白色",
price:2990,
sales:1000
},
{
name:"黄米",
color:"黄色",
price:299,
sales:300
},
{
name:"大米",
color:"紫色",
price:9922,
sales:100
},
{
name:"诺基亚",
color:"蓝色",
price:1099,
sales:900
},
{
name:"平板",
color:"蓝色",
price:20999,
sales:10000
}
]
3294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
