<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        function createTable(){
            var table = document.createElement("table");
            table.border = "1";
            table.width = "100%";

            //table API
            //创建一行
            //var tr = table.insertRow(table.rows.length);
            //创建单元格
            //var td = tr.insertCell(tr.cells.length);
            var tr,td;
            for(var i=0;i<6;i++){
                //循环插入元素
                tr = table.insertRow(table.rows.length);
                if(i%2 === 0){
                    tr.style.backgroundColor = "red";
                }else{
                    tr.style.backgroundColor = "green";
                }
                for(var j=0;j<5;j++){
                    td = tr.insertCell(tr.cells.length);
                    td.innerHTML = "第"+i+"行，第"+j+"列";
                    td.align = "center";

                }
            }

            //td.innerHTML = "测试";

            document.querySelector("#tb").appendChild(table);
        }
    </script>
</head>
<body>
<input type="button" onclick="createTable()" value="createTable">
<hr>
<div id="tb"></div>
</body>
</html>

js中创建table表格的更多相关文章

  1. js创建table表格

    //js创建table表格var tr;var cell;for(var i=0;i<10;i++){ //创建一个tr tr=document.createElement('tr'); doc ...

  2. 使用js方法将table表格中指定列指定行中相同内容的单元格进行合并操作。

    前言 使用js方法对html中的table表格进行单元格的行列合并操作. 网上执行此操作的实例方法有很多,但根据实际业务的区别,大多不适用. 所以在网上各位大神写的方法的基础上进行了部分修改以适合自己 ...

  3. js中获取 table节点各tr及td的内容方法

    js中获取 table节点各tr及td的内容方法 分类: java基础2013-10-12 17:54 1055人阅读 评论(0) 收藏 举报 <table id="tb1" ...

  4. JS动态创建Table,Tr,Td并赋值

    JS动态创建Table,Tr,Td并赋值. 成果库修改: 要求主题列表随成果类型改变而改变 网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合——动态创建/编辑Tab ...

  5. js中创建html标签、加入select下默认的option的value和text、删除select元素节点下全部的OPTION节点

    <pre name="code" class="java"> jsp 中的下拉框标签: <s:select name="sjx&qu ...

  6. js中的table导出成Excel表格

    首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...

  7. JS动态创建table

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. js中的 Table 对象

    Table 对象Table 对象代表一个 HTML 表格.在 HTML 文档中 <table> 标签每出现一次,一个 Table 对象就会被创建. Table 对象集合cells[]    ...

  9. js dom 创建table标签和子属性， 以及创建多选框

    代码: <div class="Category"> <span id="Edit_headerTitle">Edit Categori ...

随机推荐

  1. kmp&扩展kmp

    kmp: KMP的主要目的是求B是不是A的子串,以及若是,B在A中所有出现的位置 写的很详细的大佬的博客:http://www.matrix67.com/blog/archives/115 模板: / ...

  2. redis.conf配置文件参数说明

    参数说明 redis.conf 配置项说明如下: 1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程     daemonize no 2. 当Redis以守护 ...

  3. Java例子

    1. 本章学习总结 今天主要学习了三个知识点 封装 继承 多态 2. 书面作业 Q1. java HelloWorld命令中,HelloWorld这个参数是什么含义? 今天学了一个重要的命令javac ...

  4. 201621123005《java程序设计》第八次实验总结

    201621123005<Java程序设计>第八次实验总结 1. 本周学习总结 以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 2. 书面作业 1. ArrayList代码分析 1 ...

  5. SpringInAction--SpringMvc高级技术（servlet、filter、multipart）

    前面学了spirng的一些配置,以及web方面的知识,今天就在学习一下在spring比较常用的一些高级技术... 首先来介绍下什么叫servlet吧(来着维基百科) Servlet(Server Ap ...

  6. Scrum立会报告+燃尽图 07

    作业要求[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2289] 版本控制:https://git.coding.net/liuyy08 ...

  7. Alpha发布

    作业链接[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2283] 视频展示 链接[https://v.youku.com/v_show/ ...

  8. Scrum立会报告+燃尽图（3）选题

    此作业要求参见:https://edu.cnblogs.com/campus/nenu/2018fall/homework/2193 一.小组介绍 组长:刘莹莹 组员:朱珅莹 孙韦男 祝玮琦 王玉潘 ...

  9. memcache+tomcat7.0.37+nginx实现session共享

    一.session工作原理 由于http是无状态的协议,当我们访问了页面A,然后访问页面B,http无法确定这2个页面的访问是来自同一个人.因此,我们要用cookie或session来跟踪用户,根据授 ...

  10. java静态代理和动态代理（一）

    代理Proxy: Proxy代理模式是一种结构型设计模式,主要解决的问题是:在直接访问对象时带来的问题. 代理是一种常用的设计模式,其目的就是为其他对象提供一个代理以控制对某个对象的访问.代理类负责为 ...