用户名: 用QQ登录本站
密 码: 注册
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年99元       [公益] 节省一分零钱 献出一份爱心 温暖世间真情      
广告位招租中
2021年 儿童节 23
2021年 端午节 36
2022年 元 旦 237
2022年 春 节 268
 
  • 您现在的位置:首页 >> JS >> 内容

    JavaScript实现动态加载删除表格

    内容摘要: !DOCTYPE htmlhtml lang='en'headmeta charset='UTF-8'meta http-equiv='X-UA-Compatible' content='IE=edge'meta name='viewport' content='width=device-width, initial-scale=1.0'titleDocum......

      <!DOCTYPE html>

    <html lang="en">


    <head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

    table {

    margin: 100px auto;

    width: 500px;

    border-collapse: collapse;

    }


    th {

    border: 1px solid gray;

    background-color: lightgray;

    height: 30px;

    }


    td {

    text-align: center;

    border: 1px solid gray;

    }

    </style>

    </head>


    <body>

    <table>

    <thead>

    <th>姓名</th>

    <th>科目</th>

    <th>成绩</th>

    <th>操作</th>

    </thead>

    <tbody>


    </tbody>

    </table>

    <script>

    var tbd = document.querySelector('tbody');

    var info = [{

    name: 'kathy',

    subject: "javascript",

    score: 60

    }, {

    name: 'Milla',

    subject: "java",

    score: 100

    }, {

    name: 'kiki',

    subject: "python",

    score: 80

    }, {

    name: 'linda',

    subject: "jquery",

    score: 70

    }]

    var info_list = [];

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

    console.log(info[i]['subject']);

    var str = "<tr><td>" + info[i]['name'] + "</td>" + "<td>" + info[i]['subject'] + "</td>" + "<td>" + info[i]['score'] + "</td>" + "<td><a href = javascript:;>删除</a></td>" + "</tr>";

    info_list.push(str);

    }

    tbd.innerHTML = info_list.join('');


    var deletes = document.querySelectorAll('a');

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

    deletes[i].onclick = function() {

    tbd.removeChild(this.parentNode.parentNode);

    }

    }

    </script>

    </body>


    </html>

      版权声明:本内容来源于脚本之家,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。


    发布日期:2021/4/12 发布时间:10:51:40 点击:241 录入:齐天大圣
  • 上一篇:JavaScript实现鼠标经过显示下拉框
  • 下一篇:JavaScript实现复选框全选功能
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.1 Build 21.05.08(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    齐天大圣® 制 作 ©2000-2021
    您正在使用IPV4(3.230.154.160)访问本站 您本次共访问本站 1 次