您正在使用IPV4(3.236.214.224)访问本站 您本次共访问本站 1 次
用户名: 用QQ登录本站
密 码:
验证码:
首页 软件 编程 笑话 知识 公告 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

[公益] 节省一分零钱 献出一份爱心 温暖世间真情       【腾讯云】618云上GO!云服务器限时秒杀,1核2G首年95元!      
广告位招租中
2021年 建党节 9
2021年 建军节 40
2022年 元 旦 193
2022年 春 节 224
 
  • 您现在的位置:首页 >> 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/6/15 发布时间:12:34:56 点击:20 录入:齐天大圣
  • 上一篇:JavaScript实现鼠标经过显示下拉框
  • 下一篇:JavaScript实现复选框全选功能
  • 本类新增
    本类热门文章
    Baidu

    YiJiaCMS V5.5 Build 21.06.17(MSSQL) 闽ICP备05000814号-1
    本空间由景安网络提供,百度云加速提供加速防护
    ©2000-2021