删除操作

删除操作

css代码如下：

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;

    }

    .active{

        color: blue;

        cursor: pointer;

    }

js数据准备代码：

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

}   

]

html结构：

<table>

    <thead>

        <tr>

            <th>名称</th>

            <th>颜色</th>

            <th>价格</th>

            <th>销量</th>

            <th>操作</th>

        </tr>

    </thead>

    <tbody></tbody>

</table>

js代码如下：

var table = document.querySelector('table');

    var tbody = document.querySelector('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 = document.querySelectorAll('tbody tr .active');

    var trs = document.querySelectorAll('tbody tr');

    for (var i = 0; i < data.length; i++) {

        tds[i].onclick = function(){

            this.parentNode.remove();

        }

    }

今天就分享到这里吧，下次再见