@charset "utf-8";
/* CSS Document */
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:5px;
}

-----html端---

<style type="text/css">
@import url(css.css);
</style>
</head>

<body>
<!--在页面中创建一个5行6列的表格
1、事件源，比如按钮
2、必须有一个生成的表格节点存储位置。
-->
<script type="text/javascript">
function crtTable(){
/*
*思路：
*可以通过之前学过的createElement创建元素的形式来完成。
*/
//1、创建表格节点。
var oTabNode = document.createElement("table");

//2、创建tBody节点。
var oTbdNode = document.createElement("tbody");

//3、创建行节点。
var oTrNode = document.createElement("tr");

//4、创建单元格节点。
var oTdNode = document.createElement("td");

oTdNode.innerHTML = "这是一个单元格";

//让这些节点有关系。进行指定层次的节点添加。
oTrNode.appendChild(oTdNode);

oTbdNode.appendChild(oTrNode);

oTabNode.appendChild(oTbdNode);

document.getElementsByTagName("div")[0].appendChild(oTabNode);

}

function crtTable(){
var oTabNode = document.createElement("table");

for(var x=1;x<=5;x++){
var oTrNode = oTabNode.insertRow();
for(var y =1;y<=6;y++){
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML = x+"---"+y;
}
}

//将表格节点添加到div中。
document.getElementsByTagName('div')[0].appendChild(oTabNode);
document.getElementsByName("crtBut")[0].disabled=true;
}

</script>

<input type="button" value="创建表格" name="crtBut" onclick="crtTable()" />
<hr/>
<div></div>
</body>

示例-创建表格&使用表格对象的更多相关文章

  1. SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]

    SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数   --创建表格 create table aa ( UserName varchar(50 ...

  2. C# 操作Word文本框——插入表格/读取表格/删除表格

    在文本框中,我们可以操作很多元素,如文本.图片.表格等,在本篇文章中将着重介绍如何插入表格到文本框,插入的表格我们可以对表格进行格式化操作来丰富表格内容.此外,对于文本框中的表格内容,我们也可以根据需 ...

  3. [转]RegExp 构造函数创建了一个正则表达式对象，用于将文本与一个模式匹配

    本文转自:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp RegExp  ...

  4. 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间

    [源码下载] 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间 作者:webabcd 介绍速战速决 之 PHP 动态地创 ...

  5. Java避免创建不必要的对象

    小Alan最近看到了<Effective Java>这本书,这本书包含的内容非常丰富,这本书我就不多介绍了,只能默默的说一句,作为一名java开发错过了这本书难免会成为一个小遗憾,所以还是 ...

  6. 【2017-03-20】HTML基础知识、文字标记、图片标记、空格换行、表格、表格嵌套及布局、超链接

    一.HTML基础知识 HTML: 网站(站点) - 网页 网站是由一个或者多个网页组合起来的 HTML作为文件后缀名,可以把文件变为网页 HTML是一门编程语言的名字:超文本标记语言 超越了文字的范畴 ...

  7. 使用Builder模式创建复杂可选参数对象

    在新建对象时,若需要对大量可选参数进行赋值,最常见的做法是JavaBeans模式,即调用一个无参构造方法创建对象,然后调用setter方法来设置每个必要的参数,以及每个相关的可选参数.代码示例如下: ...

  8. Java 避免创建不必要的对象

    最好能重用对象而不是在每次需要的时候就创建一个相同功能的新对象.如果对象是不可变的,它就始终可以被重用. String s = new String("stringette"); ...

  9. 【转载】如何在Android中避免创建不必要的对象

    在编程开发中,内存的占用是我们经常要面对的现实,通常的内存调优的方向就是尽量减少内存的占用.这其中避免创建不必要的对象是一项重要的方面. Android设备不像PC那样有着足够大的内存,而且单个App ...

  10. 用类方法------>快速创建一个autorelease的对象，在封装的类方法内部

    在封装的类方法内部,也就是+ (id)personWithName:(NSString *)name andAge:(int)age内部: 创建了一个person对象,并且创建了一个person*类型 ...

随机推荐

  1. WPF XAML之bing使用StringFormat

    WPF XAML之bing使用StringFormat // 转化为百分比 Text="{Binding Progress, StringFormat=\{0:P\}}" < ...

  2. 静态数据成员（面向对象的static关键字）

    静态数据成员: 在类内数据成员的声明前加上关键字static,该数据成员就是类内的静态数据成员.先举一个静态数据成员的例子. #include<iostream> using namesp ...

  3. 让Docker使用国内的镜像服务

    使用 Docker 的时候,需要经常从官方获取镜像,但是由于显而易见的网络原因,拉取镜像的过程非常耗时,严重影响使用 Docker 的体验.因此 DaoCloud 推出 Docker 加速器解决这个难 ...

  4. oracle sql别名

    为sql的字段起一个别名,常以为是可有可无的,但是有时候是必要的. 例如在ibatis中 <!-- 获取已发或待发送的彩信记录列表 --> <resultMap id="m ...

  5. My97DatePicker控件

    本文只做了功能说明,详细请看http://www.my97.net/dp/demo/index.htm 二. 功能及示例 1. 常规功能 支持多种调用模式 除了支持常规在input单击或获得焦点调用外 ...

  6. 【原】iOS学习39网络之数据请求

    1. HTTP和HTTPS协议 1> URL URL全称是Uniform Resource Locator(统一资源定位符)通过1个URL,能找到互联网上唯一的1个资源 URL就是资源的地址.位 ...

  7. UILabel 的属性（用法）方法

    Label 中常用的方法属性 UILabel *label =[[UILabel alloc]initWithFrame:CGRectMake(90, 100, 140, 40)];//设置Label ...

  8. c++实现des算法

    程序分三部分,des头文件,des类实现,main函数调用. //panda //2013-4-13 //des //des.h class DES { private: //public: //明文 ...

  9. BZOJ 3732 题解

    3732: Network Description 给你N个点的无向图 (1 <= N <= 15,000),记为:1…N. 图中有M条边 (1 <= M <= 30,000) ...

  10. ThinkPhp循环出数据库中的内容并输出到模板

    <foreach name='user' item='v'> //循环出数据库中的内容 对应控制器->方法中的  $this->assign('user',M('user')- ...