利用javascript动态生成表格及注释

记录学习第一天：关于javascript如何动态的生成表格

css样式想节省时间就没写,所以只有基本样式。

html部分：

创建一个表格（table）的头部（thead）和数据（tbody）标签。

<table border="1px"  cellspacing="0"><thead ><tr><th>姓名</th><th>学号</th><th>班级</th><th>年龄</th><th>操作</th></tr></thead><tbody></tbody></table></div><script src="../js/动态生成表格.js"></script>

js部分：

1. 获取html的节点和创建静态数据的过程

2.动态生成表格的过程

3. 点击删除的时候删除节点的操作

要学习的知识点:

createElement(创建节点 ) 用法：document.createElement('要添加的节点')；
appendChild(生成节点) 用法：父节点 .appendChild('子节点');
removeChild (删除节点 ) 用法：父节点 .removeChild('子节点')；
querySelectorAll (获取全部节点) 用法： document.querySelectorAll('节点'）；
querySelector（获取一个节点）用法： document.querySelector('节点');

var th = document.querySelectorAll("th");
var father = document.querySelector("tbody");
//创建一个数组里面包含多个对象
var date = [{name: "张三",number: "456",classn: "19网络",age: 25},{name: "李四",number: "789",classn: "12网络",age: 29}]//数组中有多少个对象便循环多少次
for (var i = 0; i < date.length; i++) {//创建一个名为tr的节点并赋给trvar tr = document.createElement("tr");//在father所在节点的子节点的最后一个节点后面添加一个tr节点father.appendChild(tr);//用for in 循环来遍历每个date中对象的属性值for (var key in date[i]) {//创建一个名为td的节点并赋给tdvar td = document.createElement('td');//td输出的文本为date数组中每个对象的属性值。td.innerHTML = date[i][key];//在tr的子节点从前往后依次添加一个td节点tr.appendChild(td);}//创建删除按钮//创建一个td节点var td = document.createElement('td');//td中的文本为删除a标签td.innerHTML = "<a href='javascript:;'>删除</a>" ;//在tr的子节点后面从前往后进行插入td节点tr.appendChild(td);
}//当上面的操作执行完毕后 有数据和删除键
//执行删除操作
//获取所有的节点a(删除)
var aa = document.querySelectorAll('a');
//有多少个节点a便执行多少次循环(给每个节点a绑定点击事件)
for(var i = 0;i<aa.length;i++){//点击节点a执行函数aa[i].onclick = function() {//此时this指向aa[i]   this.parentNode.parentNode---->就是a标签的父亲(td)的父亲(tr)//删除节点  语法：父节点.renoveChild(父节点的子节点)father.removeChild(this.parentNode.parentNode)}
}

利用javascript动态生成表格及注释相关推荐

利用Javascript动态生成表格的小demo
利用Javascript动态生成表格的小demo 利用Javascript中data数据库存储内容动态生成表格,点击删除可对整行内容进行删除 <!DOCTYPE html> <htm ...
利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
javascript案例：动态生成表格
js案例:动态生成表格一.文字梳理 * 创建一个页面:两个输入框和一个按钮 * 第一步:得到输入的行和列的值 * 第二步:生成表格 - 循环行 - 在行里面循环单元格 * 第三步:把表格(表格放到变 ...
JavaScript基础学习动态生成表格
JavaScript基础学习动态生成表格根据我们拥有的数据来动态创建表格的行和列,以及实现删除行的操作 <!DOCTYPE html> <html lang="en&q ...
WebAPI(part10)--动态生成表格
学习笔记,仅供参考,有错必究文章目录动态生成表格动态生成表格从本地取到数据,动态生成表格,并添加删除操作. 代码: <!DOCTYPE html> <html>< ...
动态生成表格、隐藏表格、选中删除任意行、jquery、输入验证
PS: 游戏公司后台开发,工作模式:996. 于是写博客这事也荒废了.... 想想还是写一点吧. 呵呵,请不要笑话我注释写这么多,习惯了,我上班写代码都是有注释的. 我建两个相似的表是为了,给后台使用 ...
django通过ajax请求接口返回多条数据，并动态生成表格，请求表单后将表格数据并入库
一.最近在做接口相关的开发,需求是这样的,通过一个接口所需要传递的参数,调用接口后,处理接口响应的参数,返回多条数据,并动态生成表格,请求表单后将表格的数据入库,下面是我改过的代码,跟实际代码有些出入 ...
php输出动态表格,PHP动态生成表格
好文网为大家准备了关于PHP动态生成表格范文,好文网里面收集了五十多篇关于好PHP动态生成表格好文,希望可以帮助大家.更多关于PHP动态生成表格内容请关注好文网篇一:PHP生成静态网页的通用代码最近研 ...
js动态生成表格【含合并单元格的表格】
最近遇到需求,动态生成表格,类似Excel,支持合并单元格的表格,代码分享给大家~ 一.网上找到的简单生成表格的例子: 以下是生成规则表格m行*n列类似,可以直接打开HTML查看结果. <!DO ...
JSON格式化动态生成表格表格转置行列转换 Excel导出
先看效果初始化: JSON格式化 : 生成表格-方式1 : 生成表格-方式2 : Excel导出需要行求和.列求和功能的查看 JSON格式化动态生成表格表格转置行列转换 Excel导出行求 ...

利用javascript动态生成表格及注释

记录学习第一天：关于javascript如何动态的生成表格

html部分：

js部分：

要学习的知识点:

利用javascript动态生成表格及注释相关推荐

最新文章

热门文章

利用javascript动态生成表格及注释

记录学习第一天 ：关于javascript如何动态的生成表格

html部分：

js部分：

要学习的知识点:

利用javascript动态生成表格及注释相关推荐

最新文章

热门文章

记录学习第一天：关于javascript如何动态的生成表格