示例-创建表格&使用表格对象
@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>
示例-创建表格&使用表格对象的更多相关文章
- SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学、字符串、日期时间)函数[转]
SQL server 创建 修改表格 及表格基本增删改查 及 高级查询 及 (数学.字符串.日期时间)函数 --创建表格 create table aa ( UserName varchar(50 ...
- C# 操作Word文本框——插入表格/读取表格/删除表格
在文本框中,我们可以操作很多元素,如文本.图片.表格等,在本篇文章中将着重介绍如何插入表格到文本框,插入的表格我们可以对表格进行格式化操作来丰富表格内容.此外,对于文本框中的表格内容,我们也可以根据需 ...
- [转]RegExp 构造函数创建了一个正则表达式对象，用于将文本与一个模式匹配
本文转自:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RegExp RegExp ...
- 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间
[源码下载] 速战速决 (5) - PHP: 动态地创建属性和方法, 对象的复制, 对象的比较, 加载指定的文件, 自动加载类文件, 命名空间 作者:webabcd 介绍速战速决 之 PHP 动态地创 ...
- Java避免创建不必要的对象
小Alan最近看到了<Effective Java>这本书,这本书包含的内容非常丰富,这本书我就不多介绍了,只能默默的说一句,作为一名java开发错过了这本书难免会成为一个小遗憾,所以还是 ...
- 【2017-03-20】HTML基础知识、文字标记、图片标记、空格换行、表格、表格嵌套及布局、超链接
一.HTML基础知识 HTML: 网站(站点) - 网页 网站是由一个或者多个网页组合起来的 HTML作为文件后缀名,可以把文件变为网页 HTML是一门编程语言的名字:超文本标记语言 超越了文字的范畴 ...
- 使用Builder模式创建复杂可选参数对象
在新建对象时,若需要对大量可选参数进行赋值,最常见的做法是JavaBeans模式,即调用一个无参构造方法创建对象,然后调用setter方法来设置每个必要的参数,以及每个相关的可选参数.代码示例如下: ...
- Java 避免创建不必要的对象
最好能重用对象而不是在每次需要的时候就创建一个相同功能的新对象.如果对象是不可变的,它就始终可以被重用. String s = new String("stringette"); ...
- 【转载】如何在Android中避免创建不必要的对象
在编程开发中,内存的占用是我们经常要面对的现实,通常的内存调优的方向就是尽量减少内存的占用.这其中避免创建不必要的对象是一项重要的方面. Android设备不像PC那样有着足够大的内存,而且单个App ...
- 用类方法------>快速创建一个autorelease的对象，在封装的类方法内部
在封装的类方法内部,也就是+ (id)personWithName:(NSString *)name andAge:(int)age内部: 创建了一个person对象,并且创建了一个person*类型 ...
随机推荐
- mongodb学习03 操作详解
插入文档 db.test.insert({"name":"jinks"}); 批量插入 db.test.insert([{}, {}, {}]); 一次批量插入 ...
- css3 总结02
盒子尺寸 .border-box{ -webkit-box-sizing: border-box; -moz-box-sizing: border-box; border-sizing: border ...
- 在IOS手机safari浏览器的无痕模式下，localStorage不起作用
无痕模式是黑色风格,正常模式是白色风格.在无痕模式中,使用localStorage.setItem()会报错,但在window对象下确实有localStorage.setItem方法. if (typ ...
- yii2.0 的数据的 改
修改数据 /** * 根据获取到的数据的id 去编辑对应的数据 controller层 */ //引入对应的model use app\models\About; //定义一个方法 ...
- bootstrap datetimepicker 中只显示年或者只显示月份
1.只显示datetimepicker 日历中只显示年份 $("#day-access-calendar").datepicker({ startView: 2, maxView ...
- webvnc利器-noVNC集成实战
我们在做一个虚拟机管理平台,底层虚拟化使用KVM,我们希望在网页上操作虚拟机. 一开始用applet嵌在网页内实现webvnc,不过由于applet的在浏览器上运行安全性限制,我们需要一个新的方案.此 ...
- MongoDB 入门之安装篇
前言:MongoDB 在各 OS 上的安装比较简单,此文章只用来记录,不考虑技术深度. 一.Ubuntu 导入 MongoDB 公钥,添该软件源文件,更新源列表 sudo apt-key adv -- ...
- ural 2066. Simple Expression
2066. Simple Expression Time limit: 1.0 secondMemory limit: 64 MB You probably know that Alex is a v ...
- oralce CASE WHEN 用法
如何将时间日期分隔成“上半月”“下半月” select ( THEN '上半月' THEN '下半月' ELSE 'NULL' END) AS mon from BFBHDD8.SKTXSJL
- BZOJ2646 : neerc2011 flight
答案由$3$部分构成: $1$.抛物线的极值. $2$.询问区间的左端点在抛物线上的值. $3$.询问区间的右端点在抛物线上的值. 对于$1$,就是某个矩形范围内最大值查询,使用KD-Tree可以在$ ...