<!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. keras_基本网络层结构(2)_卷积层

    参考文献:http://keras-cn.readthedocs.io/en/latest/layers/convolutional_layer/ 卷积层 Conv1D层 keras.layers.c ...

  2. 各开源 bbs 程序比较

    主要是集中在 php 开源轻巧的程序. 搜索到一个逼乎的一个帖子:https://www.zhihu.com/question/20655704 ,顺藤摸瓜 下. carbon forum 第一个测试 ...

  3. JavaScript学习（一）——基础知识查漏补缺

    标签script 我们知道,html要使用js就要使用<script>标签. 两种方式: 一是直接在<script>这里</script>写入代码. 二是在别的文件 ...

  4. BZOJ4978: [Lydsy1708月赛]泛化物品（乱搞）

    4978: [Lydsy1708月赛]泛化物品 Time Limit: 5 Sec  Memory Limit: 256 MBSubmit: 220  Solved: 70[Submit][Statu ...

  5. 高性能Mysql学习笔记之事务

    传送门 什么是事务? 事务就是一组原子性的SQL查询,或者说一个独立的工作单元.如果数据库引擎能够成功地对数据库应用该组查询的全部语句,那么就会执行该组查询.如果其中有任何一条语句因为崩溃或其他原因无 ...

  6. memsql filesystem pipeline 试用

    一些功能类似drill ,比如s3,file ... 创建file pipeline 准备file mkdir -p /opt/db/ touch books.txt 内容如下: The Catche ...

  7. 在AD中存取照片

    AD中有存放照片的字段吗? 答案肯定是有的.photo,jpegPhoto,thumbnailPhoto 前端时间客户,包括领导 在问通讯录中的照片为什么存在数据库中而不是AD中,AD中的属性能不能利 ...

  8. 一:线性dp

    概念: 动态规划是运筹学的一个分支,是求解决策过程最优化的数学方法. 动态规划是通过拆分问题,定义问题状态和状态之间的关系使得问题能够以递推(或者说分治)的方法去解决. 解决策略: 1)最优化原理:如 ...

  9. linux 下 ifcfg-eth0 配置/CentOS_minimal安装和开发环境部署

    CentOS_minimal安装和开发环境部署:http://www.th7.cn/system/lin/201305/39002.shtml 网络接口配置文件 [root@localhost ~]# ...

  10. Tomcat 7 的七大新特性（更容易将Tomcat内嵌到应用去中去 ）

    Tomcat的7引入了许多新功能,并对现有功能进行了增强.很多文章列出了Tomcat 7的新功能,但大多数并没有详细解释它们,或指出它们的不足,或提供代码示例.本文将明确描述TOMCAT 7中七个最显 ...