js 表格的添加和删除操作
大江东去，浪淘尽，千古风流人物。故垒西边，人道是，三国周郎赤壁。乱石穿空，惊涛拍岸，卷起千堆雪。江山如画，一时多少豪杰。遥想公瑾当年，小乔初嫁了，雄姿英发。羽扇纶巾，谈笑间，樯橹灰飞烟灭。故国神游，多情应笑我，早生华发。人生如梦，一尊还酹江月。--来自奔跑的panda部落，panda每天与您一起进步
（效果图）
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>动态生成表格案例</title>
<style> </style>
</head> <body> <style type="text/css">
table.gridtable {
font-family: verdana, arial, sans-serif;
font-size: 11px;
color: #333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
width: 100%;
font-size: 16px;
text-align: center;
} table.gridtable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #dedede;
} table.gridtable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style> <!-- Table goes in the document BODY -->
<table class="gridtable">
<thead>
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody> </tbody>
</table> <script>
var data = [{
name: '小明',
subject: '物理',
score: '100'
},
{
name: 'marry',
subject: '化学',
score: '99'
},
{
name: 'luxi',
subject: '语文',
score: '78'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
{
name: 'city',
subject: '英语',
score: '88'
},
];
// 创建节点
var tbody = document.querySelector('tbody');
// 添加节点
// 创建行和单元格
for (var i = 0; i < data.length; i++) {
// 创建tr行
var tr = document.createElement('tr');
tbody.appendChild(tr); //创建td单元格
for (var k in data[i]) {
//创建单元格
var td = document.createElement('td');
tr.appendChild(td);
console.log(data[i][k]);
td.innerHTML = data[i][k] } // 创建删除功能
var td = document.createElement('td');
td.innerHTML = '<a href = "javascript:;">删除</a>';
// 添加节点
tr.appendChild(td); }
// 删除功能
var as = document.querySelectorAll('a');
for (var i = 0; i < as.length; i++) {
as[i].onclick = function () {
// 删除的是a标签所在的行(链接的父亲的父亲)
tbody.removeChild(this.parentNode.parentNode);
}
} // for(var k in obj){
// k -- 属性名
// obj[k] -- 属性值
// }
</script>
</body> </html>
js 表格的添加和删除操作的更多相关文章
- ***Redis hash是一个string类型的field和value的映射表.它的添加、删除操作都是O(1)(平均)。hash特别适合用于存储对象
http://redis.readthedocs.org/en/latest/hash/hset.html HSET HSET key field value (存一个对象的时候key存) 将哈希 ...
- CentOS7安装CDH 第八章：CDH中对服务和机器的添加与删除操作
相关文章链接 CentOS7安装CDH 第一章:CentOS7系统安装 CentOS7安装CDH 第二章:CentOS7各个软件安装和启动 CentOS7安装CDH 第三章:CDH中的问题和解决方法 ...
- Redis hash 是一个 string 类型的 field 和 value 的映射表.它的添加、删除操作都是 O(1)（平均）。
2.3 hashes 类型及操作 Redis hash 是一个 string 类型的 field 和 value 的映射表.它的添加.删除操作都是 O(1)(平均).hash 特别适合用于存储对象.相 ...
- select框内容的编辑、修改、添加、删除操作
// 添加 function col_add() { var selObj = $("#mySelect"); var value="value"; var t ...
- js数值的添加与删除
js中数组元素的添加和删除 js中数组元素常用添加方法是直接添加.push方法以及unshift方法 删除方法则是delete.pop.shift 集修改方法为一身的则是splice 1.添加: (1 ...
- JS实现动态添加和删除div
实现方式一:只在最后一个数据中动态添加或者删除 | 背景需要做一个页面,页面可以输入参数,点击确认按钮可以发请求给某接口.但是接口的某个字段是数组类型,所以在页面上需要实现添加或者删除元素的功能. | ...
- 原生js事件的添加和删除
在IE浏览器中添加或删除事件用attachEvent.detachEvent.在其他标准浏览器中则用addEventListener.removeEventListener.下面的对事件的添加和删除做 ...
- js动态添加-表格逐行添加、删除、遍历取值
关于js对表格进行逐行添加,今天抽空整理了一下:新建一个html文件(没有编辑器的可以新建一个demo.txt文件,然后改后缀名为demo.html),把下面代码全部贴进去即可.功能包括:表格添加一行 ...
- Jquery和js实现cookie操作手机浮层广告；附加：js获取、添加、删除cookie
1.jquery cookie包实现手机上的浮层广告 <span style="font-size:18px;">$(document).ready(function( ...
- js添加确认删除操作注意事项
function delsure(){ if(confirm('确认删除吗?')){ return true;//点击确定则返回这里的内容 }else{ return false; } } 在表单中添 ...
随机推荐
- 力扣523(java&python)-连续的子数组和（中等）
题目: 给你一个整数数组 nums 和一个整数 k ,编写一个函数来判断该数组是否含有同时满足下述条件的连续子数组: 子数组大小 至少为 2 ,且子数组元素总和为 k 的倍数.如果存在,返回 true ...
- 第 8章 Python 爬虫框架 Scrapy（下）
第 8章 Python 爬虫框架 Scrapy(下) 8.1 Scrapy 对接 Selenium 有一种反爬虫策略就是通过 JS 动态加载数据,应对这种策略的两种方法如下: 分析 Ajax 请求 ...
- HarmonyOS NEXT应用开发之下拉刷新与上滑加载案例
介绍 本示例介绍使用第三方库的PullToRefresh组件实现列表的下拉刷新数据和上滑加载后续数据. 效果图预览 使用说明 进入页面,下拉列表触发刷新数据事件,等待数据刷新完成. 上滑列表到底部,触 ...
- PyFlink 开发环境利器：Zeppelin Notebook
简介: 在 Zeppelin notebook 里利用 Conda 来创建 Python env 自动部署到 Yarn 集群中. PyFlink 作为 Flink 的 Python 语言入口,其 Py ...
- WPF 对接 Vortice 调用 WIC 加载图片
本文将告诉大家如何通过 Vortice 库从底层的方式使用 WIC 层加载本地图片文件,解码为 IWICBitmap 图片,然后将 IWICBitmap 图片交给 WPF 进行渲染 本文的前置博客:W ...
- Ubuntu 20.04版本安装k8s控制节点与控制节点升级
一.环境配置 服务器配置:2核4G IP:192.168.10.23 主机名:master4将改主机加入此 集群 # 1.修改主机名 hostnamectl set-hostname master4 ...
- 简说Python之循环语句
目录 Python的运算逻辑 Python条件语句 Python循环语句 Python while循环 Python for 循环 条件语句和循环语句是程序常用的一种基础语法,从语言上来说,能说清楚的 ...
- ITIL一定要去认证吗？哪个版本合适
关于ITIL的演进 ITIL是在演进发展中的,v1并不成功,v2 v3讲究流程与控制,其实都是偏向务虚,理论东西较多,能落地的少或许OGC的专家们自己也发现 光靠口头忽悠并不能说服最终用户接受ITIL ...
- sqli-labs-master 第一关
Sql注入 基础知识: 一··系统函数; 1. version()--MySQL 版本 2. user()--数据库用户名 3. database()--数据库名 4. @@datadir--数据库路 ...
- 模型压缩与部署-书生浦语大模型实战营学习笔记5&大语言模型11
大语言模型-11.模型压缩与部署 书生浦语大模型实战营学习笔记4-模型压缩与部署 本文包括第二期实战营的第5课内容,介绍关于模型压缩的相关内容,主要包括.模型量化和模型部署的相关内容. 模型部署 定义 ...