<!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. BZOJ2958 序列染色

    果然清华集训的题目...显然的DP题但是不会做... 我们令f[i][j][w]表示状态方程 w表示到了字符串的第w个 i = 0, 1, 2分别表示k个B和k个W都没填上.k个B填上了k个W没填上. ...

  2. 转载-lvs-dr模式+keepalived双机

    lvs+keepalived实现高可用群集配置详解 Mon 16 April 2012 来源: https://www.linuxzen.com/lvskeepalivedshi-xian-gao-k ...

  3. 使用peach工具进行fuzz测试

    本文简要介绍了Fuzz 工具Peach的使用,并通过文件格式 Fuzz举例阐述了 Peach Pit 文件的编写. 本文转自“绿盟科技博客”:http://blog.nsfocus.net/peach ...

  4. Python数据类型-03.序列-列表和元组

    本文主要记录关于Python序列中列表和元组的定义特点和常用方法 1.序列(sequence) 1.1.序列的定义 序列是一组有顺序的元素的集合(其实是是对象的集合,后期会引入“对象”这个概念)序列包 ...

  5. PyalgoTrade 优化（六）

    满足优化器组件.这个想法很简单: 有一个服务器负责: 提供数据来运行策略. 提供运行策略的参数. 记录每个工作线程的策略结果. 有多名工作人员负责: 使用服务器提供的数据和参数运行策略. 为了说明这一 ...

  6. 关于CSS:transform、transition的运用

    这3个属性是CSS3新增的属性,功能极其强大,能完成许多以往JS才能完成的页面动态效果,而且运行效率非常高,考虑到浏览器兼容性问题,应在3个属性前面加上各浏览器的前缀.以下思维导图介绍了3个属性的各属 ...

  7. Visual C++2013 使用技巧

    对 Visual Studio 2013 的 IDE 不熟悉.刚用VS 中的 VC++ IDE 进行编程,一些东西用得少,或以后久了不用,怕又忘了.现在慢慢知道点,记录点,以备以后查阅. 1. 记编译 ...

  8. Git 学习记录一

    主要来源参考http://www.runoob.com/git/git-install-setup.html Windows 平台上安装 在 Windows 平台上安装 Git 同样轻松,有个叫做 m ...

  9. MySQL的WHERE语句中BETWEEN与IN的用法和他们的区别

    MySQL BETWEEN 用法 not可以对between...and取反. 1.数值型 BETWEEN 运算符用于 WHERE 表达式中,选取介于两个值之间的数据范围.BETWEEN 同 AND ...

  10. linux之 LVM扩容

    1. 查看本机现在磁盘的情况[root@oralce10g ~]# df Filesystem 1K-blocks Used Available Use% Mounted on/dev/mapper/ ...