javascript动态创建table
function createTable(parentNode,headres,datas){//创建表格var table = document.createElement("table");//将表格追加到父容器中 parentNode.appendChild(table);//设置table的样式table.cellSpacing = 0;table.cellPadding = 0;table.border = "1px";//创建表头var thead = document.createElement("thead");//将标题追加到table中 table.appendChild(thead);//创建trvar tr =document.createElement("tr");//将tr追加到thead中 thead.appendChild(tr);//设置tr的样式属性tr.style.height="50px";tr.style.backgroundColor = "lightgray";//遍历headers中的数据for(var i =0;i<headres.length;i++){//创建thvar th = document.createElement("th");//将th追加到thead中的tr中 tr.appendChild(th);//将headers的数据找到对应的th放进去 此处 用到了setInnerText()函数 调用common.js setInnerText(th,headres[i]);}//创建tbodt createTbody(parentNode,table,datas);};function createTbody(parentNodes,table,datas){//创建tbodyvar tbody = document.createElement("tbody");//将tbody追加到table中 table.appendChild(tbody);//设置tbody的样式属性tbody.style.textAlign = "center";//遍历得到数据源for(var i=0;i<datas.length;i++){//获取没想数据var data =datas[i];//创建trtr = document.createElement("tr");//将tr追加到tbody中 tbody.appendChild(tr);//设置tbody中tr的属性tr.style.height="40px";//遍历对象的属性for(var key in data){//创建tdvar td = document.createElement("td");//追加到tbody中的tr中 tr.appendChild(td);//将得到的没项属性添加到每一个td中 setInnerText(td,data[key]);}//创建操作列td = document.createElement("td");//追加到tr中 tr.appendChild(td);//给td设置a标签td.innerHTML = "<a href='javaScript:;'>删除</a>"//注册点击事件//找到a标签var link = td.children[0];//设置a便签的属性index为1link.index = i;//注册事件link.onclick = function () {//得到当前a标签的索引值var index = this.index;//删除该索引值的项datas.splice(index,1);//删除table parentNodes.removeChild(table);//重新创建table createTable(parentNodes,headers,datas);};//判断tr隔行变色//鼠标移动上去高亮显示if(i%2==0){//奇数行tr.style.backgroundColor = "pink";}else{//偶数行tr.style.backgroundColor = "#B9FFCF";}//注册事件高亮显示 var bg;//鼠标经过tr.onmouseover = function () {bg = this.style.backgroundColor;this.style.backgroundColor = "#4BE1FF";};//鼠标离开tr.onmouseout = function(){this.style.backgroundColor = bg;};}};
转载于:https://www.cnblogs.com/610553824lyx/p/6861843.html
javascript动态创建table相关推荐
- javascript动态创建可拖动、最大化、最小化的层
javascript动态创建可拖动.最大化.最小化的层 2010-02-06 13:19 用Javascript实现div层的拖动是很常见的一种操作,比如弹出提示对话框,快捷登录等等.之前用隐藏层的方 ...
- QT通过JavaScript动态创建QML对象
QT通过JavaScript动态创建QML对象 通过JavaScript动态创建QML对象 动态创建对象 动态创建组件 从QML字符串创建对象 维护动态创建的对象 动态删除对象 通过JavaScrip ...
- Javascript动态创建SVG圆弧
Javascript动态创建SVG圆弧 0. 起源 需要做一个展示统计数据(百分比)的小部件,默认情况下该小部件是隐藏的.页面右边放置一个圆形的按钮,当点击按钮时小部件从右边滑出显示. 本着尽可能多的 ...
- html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法
本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...
- html给自动生成的td赋值,JS 动态创建Table,Tr,Td并赋值的简单示例
修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table JS部分: 经测试代码如下: /** * 动 ...
- js的节点操作动态创建table表格,创建行,删除行
节点操作 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性 ...
- javascript动态创建表格:新增、删除行和列
利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...
- javascript 动态创建表格:新增、删除行和单元格
2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...
- 利用javascript动态创建表格
//说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1. trNode table.insertRow(-1) ...
最新文章
- sqlite3 select查询一列_Python成为专业人士笔记–Sqlite3 模块
- Linux文本模式中文乱码
- 笔记本电脑锁_联想都不敢想之2020年笔记本电脑推荐
- raspberrypi python传感器_Raspberry Pi和Arduino读取串行传感器d
- jqgrid mvc_jqGrid,REST,AJAX和Spring MVC集成
- A20 init.sun7i.rc 文件
- C 和 C++ 宏 详解
- 用集合return多个值_十五个常用的 Laravel 集合(Collection)
- SAP License:SAP常用基本小技巧
- Spring ——《第二章》Spring中的Bean
- FileUtils类 使用举例
- 10 分钟看懂消息队列 RocketMQ
- mysql 清空二进制日志
- 项目时间进度计划与项目进度控制
- 《计算机操作系统》(第四版)大全总结
- cfar matlab,雷达无线电系列(二)经典CFAR算法图文解析与实现(matlab)
- 试题 算法提高 盾神与条状项链
- android v2签名机制,APK签名机制之——V2签名机制详解
- 有什么实用的电脑录音软件
- 数据分析的目的和意义(作用)是什么?
热门文章
- 汉仪尚巍手书可以商用吗_【商用车维修】夏天修空调可以撑起全年修车收入的一半,你会了吗?...
- Linux 安装之U盘引导
- LeetCode 454. 四数相加 II 思考分析
- LeetCode 15. 三数之和 思考分析(双指针解)
- 【数据结构基础笔记】【栈】
- java两个文件夹比较路径_比较Java中两个文件的路径
- 排序算法中平均时间复杂度_操作系统中的作业排序(算法,时间复杂度和示例)...
- dates.format_在SQL中使用DATES及其不同的内置函数NOW(),FORMAT()
- Object类的hashCode()方法
- 搜索---广度优先遍历、深度优先遍历、回溯法