您正在使用 IPV4 [174.129.59.198] 访问本站,您本次已经查看了 1 页
用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]保护绿色环境,构建和谐社会       悟空收录网      

【腾讯云】 爆款2核2G3M云服务器首年 61元,叠加红包再享折上折      
[公益] 地球是我家,绿化靠大家      
2024年 清明节 006
2024年 劳动节 033
2025年 元 旦 278
2025年 春 节 306
综合数码金融娱乐服务报刊政府机构 推荐 排名 今日 申请 友情  
您现在的位置:首页 >> 脚本代码 >> 内容
本类新增
本类热门
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>

版权声明:本内容来源于网络,如有侵犯您的版权,请联系站长,本站收到您的信息后将及时处理。
上一篇:JavaScript实现鼠标经过显示下拉框

 

下一篇:JavaScript实现复选框全选功能

发布日期:2021/6/15
手机扫二维码直达本页
发布时间:12:34:56
点  击:14
录  入:壹家怡园
相关文章
Baidu
YiJiaCMS 7.3.8 build231228(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,Cloudflare提供加速防护
运行时间载入中.....