@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. 《DSP using MATLAB》示例Example4.14

    代码: b = [1]; a = [1, -1.5, 0.5]; % [R, p, C] = residuez(b,a) Mp = (abs(p))' Ap = (angle(p))'/pi % ch ...

  2. node.js整理 01代码的组织和部署

    模块 require(函数) 用于在当前模块中加载和使用别的模块,传入一个模块名,返回一个模块导出对象. 模块名可使用相对路径(以./开头),或者是绝对路径(以/或C:之类的盘符开头:注意单个模块名默 ...

  3. DOM--3 DOM核心和DOM2 HTML(3)

    核心Element对象 操作Element对象的属性 为了简化对attributes的处理,Element对象中包含了很多用来操纵Node对象的attributes属性的方法: getAttribut ...

  4. eclipse安装genymotion的奇葩问题

    安装方法: 1:启动Eclipse 2:打开"Help/Install new software"菜单 在新开启的窗口中点击"add"按钮(位于窗口右上方) 在 ...

  5. Tactical Multiple Defense System 二分图

    This problem is about a war game between two countries. To protect a base, your country built a defe ...

  6. wpf获取模板化控件中的动画。

    直接在在模版中用blend添加动画,默认会放在ControlTemplate 的 Resources下面,使用了多种方法都无法正确获取Storyboard.. <ControlTemplate ...

  7. java中的URLConnection和HttpURLConnection

    URL url = new URL(strUrl); URLConnection con = url.openConnection(); URL url = new URL(strUrl); Http ...

  8. Python基础7- 流程控制之循环

    循环: 把一段代码重复性的执行N次,直到满足某个条件为止. 为了在合适的时候,停止重复执行,需要让程序出现满足停止循环的条件.Python中有三种循环(实质只有两种): while循环 for循环 嵌 ...

  9. 我认为我可以去尝试做一下Maya Ue4导出插件

    Begin Map Begin Level Begin Actor class="StaticMeshActor" Name=Floor Archetype=StaticMeshA ...

  10. header元素

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...