@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. POJ 2785 HASH

    题目链接:http://poj.org/problem?id=2785 题意:给定n行数字,每行4个数分别是a,b,c,d,现在要求能有多少个(a,b,c,d)组合并且和为0 思路:n^2统计所有(a ...

  2. java，我准备好了

    1.你对自己的未来有什么规划?做了哪些准备? 长期上学好公务员和本专业知识,将来能找一份好工作,并能在职务上履行好相称的工作.短期上在下一学期拿一等奖学金,尽快入党,考出英语四级和二级c语言.任何成就 ...

  3. java synchronized修饰普通方法，修饰静态方法，修饰代码块，修饰线程run方法 比较

    synchronized用于多线程设计,有了synchronized关键字,多线程程序的运行结果将变得可以控制.synchronized关键字用于保护共享数据. synchronized实现同步的机制 ...

  4. UVa12633 Super Rooks on Chessboard（容斥 + FFT）

    题目 Source http://acm.hust.edu.cn/vjudge/problem/42145 Description Let’s assume there is a new chess ...

  5. Storm系统高可用性HA表现

    关于Storm的高可用,有以下几个方面: (1)数据利用阶段可以通过ACK机制保证数据被处理: (2)在进程级别,worker失效,supervisor会自动重启worker线程; (3)在组件级别, ...

  6. Codeforces Round #251 (Div. 2) C. Devu and Partitioning of the Array

    注意p的边界情况,p为0,或者 p为k 奇数+偶数 = 奇数 奇数+奇数 = 偶数 #include <iostream> #include <vector> #include ...

  7. ACM: How many integers can you find-数论专题-容斥原理的简单应用+GCD

    How many integers can you find Time Limit:5000MS     Memory Limit:32768KB     64bit IO Format:%I64d ...

  8. Javascript与当前项目的思考

      主体 分为以下三部分,能力.经验有限,欢迎拍砖. 1.低效的代码 2.面向对象的重构重复利用代码 3.调试的经验总结 第一部分 日常中低效的代码 加载和运行 <html> <he ...

  9. POJ 1127 Jack Straws(计算几何)

    题目链接 抄的模版,居然1Y了.就是简单的线段相交+并查集. #include <iostream> #include <cstring> #include <cstdi ...

  10. BZOJ1565: [NOI2009]植物大战僵尸

    Description Input Output 仅包含一个整数,表示可以获得的最大能源收入.注意,你也可以选择不进行任何攻击,这样能源收入为0. Sample Input 3 2 10 0 20 0 ...