<!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. epoll模型边沿触发

    body, table{font-family: 微软雅黑; font-size: 10pt} table{border-collapse: collapse; border: solid gray; ...

  2. java Object对象的clone方法

    参考copy链接:http://blog.csdn.net/bigconvience/article/details/25025561 在看原型模式,发现要用到clone这个方法,以前和朋友聊过,没怎 ...

  3. Javascript实现重力弹跳拖拽运动效果

    声明: By:GenialX 个人主页:胡旭博客 - www.ihuxu.com QQ:2252065614 演示地址: http://www.ihuxu.com/project/gcdmove/ 调 ...

  4. Linux上jdk安装及环境变量设置

    1.jdk下载和安装 (1)http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html下载需 ...

  5. 递归遍历嵌套结构（多层List）中的元素 ------Python

    读Python基础教程(第二版)后看到了这么一个东西,就是利用递归遍历嵌套结构中的元素. 上代码: #encoding:UTF-8 def flatten(nested): try: #不要迭代类似字 ...

  6. BZOJ5090: [Lydsy1711月赛]组题（01分数规划）

    5090: [Lydsy1711月赛]组题 Time Limit: 1 Sec  Memory Limit: 256 MBSubmit: 785  Solved: 186[Submit][Status ...

  7. 常量池之字符串常量池String.intern()

    运行时常量池是方法区(PermGen)的一部分. 需要提前了解: 1. JVM内存模型. 2. JAVA对象在JVM中内存分配 常量池的好处 常量池是为了避免频繁的创建和销毁对象而影响系统性能,其实现 ...

  8. git回滚分支版本到指定版本

    昨天提交代码时Eclipse凌乱了,本来拉了dev-20190201分支的,结果提交时竟然跑到dev分支了.为了把dev分支回滚,可以有两种方式:Eclipse和命令行. 先说简单的命令行方式,先用g ...

  9. WinForm 弹窗

    private void FrmMyShow_Load(object sender, EventArgs e) { Rectangle r = Screen.GetWorkingArea(this); ...

  10. IP分片(IP Fragment)

    为什么要分片 不同的链路类型能够支持的最大传输单元值(MTU: Maxitum Transmission Unit)主要是由相关RFC文档规定的,常见的以太网链路的MTU值为1500,如果需要转发的I ...