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相关推荐

  1. javascript动态创建可拖动、最大化、最小化的层

    javascript动态创建可拖动.最大化.最小化的层 2010-02-06 13:19 用Javascript实现div层的拖动是很常见的一种操作,比如弹出提示对话框,快捷登录等等.之前用隐藏层的方 ...

  2. QT通过JavaScript动态创建QML对象

    QT通过JavaScript动态创建QML对象 通过JavaScript动态创建QML对象 动态创建对象 动态创建组件 从QML字符串创建对象 维护动态创建的对象 动态删除对象 通过JavaScrip ...

  3. Javascript动态创建SVG圆弧

    Javascript动态创建SVG圆弧 0. 起源 需要做一个展示统计数据(百分比)的小部件,默认情况下该小部件是隐藏的.页面右边放置一个圆形的按钮,当点击按钮时小部件从右边滑出显示. 本着尽可能多的 ...

  4. html表单通过js提交表单提交,JavaScript动态创建form表单并提交的实现方法

    本文实例讲述了JavaScript动态创建form表单并提交的实现方法.分享给大家供大家参考,具体如下: 页面布局有些复杂的情况下,可能需要在页面中动态创建一个 form,JavaScript 创建 ...

  5. html给自动生成的td赋值,JS 动态创建Table,Tr,Td并赋值的简单示例

    修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table JS部分: 经测试代码如下: /** * 动 ...

  6. js的节点操作动态创建table表格,创建行,删除行

    节点操作 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点,每个 HTML 元素是元素节点,HTML 元素内的文本是文本节点,每个 HTML 属性 ...

  7. javascript动态创建表格:新增、删除行和列

    利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多,但第一种有可能在IE上有问题,所以推荐大家使用第二种了,直接说吧. 1. ...

  8. javascript 动态创建表格:新增、删除行和单元格

    2019独角兽企业重金招聘Python工程师标准>>> 利用js来动态创建表格有两种格式,appendChild()和insertRow.insertCell().两种方式其实差不多 ...

  9. 利用javascript动态创建表格

    //说明:实现功能.原理上文相同.不过这次是利用已有的简单的方法创建行和列,并实现内容行鼠标移入变色功能! 效果图: /*两个方法 1.  trNode  table.insertRow(-1)    ...

最新文章

  1. sqlite3 select查询一列_Python成为专业人士笔记–Sqlite3 模块
  2. Linux文本模式中文乱码
  3. 笔记本电脑锁_联想都不敢想之2020年笔记本电脑推荐
  4. raspberrypi python传感器_Raspberry Pi和Arduino读取串行传感器d
  5. jqgrid mvc_jqGrid,REST,AJAX和Spring MVC集成
  6. A20 init.sun7i.rc 文件
  7. C 和 C++ 宏 详解
  8. 用集合return多个值_十五个常用的 Laravel 集合(Collection)
  9. SAP License:SAP常用基本小技巧
  10. Spring ——《第二章》Spring中的Bean
  11. FileUtils类 使用举例
  12. 10 分钟看懂消息队列 RocketMQ
  13. mysql 清空二进制日志
  14. 项目时间进度计划与项目进度控制
  15. 《计算机操作系统》(第四版)大全总结
  16. cfar matlab,雷达无线电系列(二)经典CFAR算法图文解析与实现(matlab)
  17. 试题 算法提高 盾神与条状项链
  18. android v2签名机制,APK签名机制之——V2签名机制详解
  19. 有什么实用的电脑录音软件
  20. 数据分析的目的和意义(作用)是什么?

热门文章

  1. 汉仪尚巍手书可以商用吗_【商用车维修】夏天修空调可以撑起全年修车收入的一半,你会了吗?...
  2. Linux 安装之U盘引导
  3. LeetCode 454. 四数相加 II 思考分析
  4. LeetCode 15. 三数之和 思考分析(双指针解)
  5. 【数据结构基础笔记】【栈】
  6. java两个文件夹比较路径_比较Java中两个文件的路径
  7. 排序算法中平均时间复杂度_操作系统中的作业排序(算法,时间复杂度和示例)...
  8. dates.format_在SQL中使用DATES及其不同的内置函数NOW(),FORMAT()
  9. Object类的hashCode()方法
  10. 搜索---广度优先遍历、深度优先遍历、回溯法