JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式
一：用最底层的方式，该方式用来创建别的对象树也可以
代码演示：
<html>
<head>
<title>DHTML技术演示---表格创建--用最底层的方式，其实该方式用来创建别的对象树也可以</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table{
border:#ff80ff;
width:500px;
border-collapse:collapse;
}
table td{
border:#0000ff 1px solid;
padding:5px;/*内补丁*/
}
</style>
<script type="text/javascript">
function createTable(){
//思路: 把表格子树中的每个节点对象创建出来，然后把这些对象组装成一棵树。最后再把这棵树挂到div对象下面
//1通过document.createElement()创建每个标签对象
var oTableNode = document.createElement("table");
var oTbdNode = document.createElement("tbody");
var oTrNode = document.createElement("tr");
var oTdNode = document.createElement("td");
oTdNode.innerHTML="单元格中的内容";
//2把以上节点组装成一棵树
oTrNode.appendChild(oTdNode);
oTbdNode.appendChild(oTrNode);
oTableNode.appendChild(oTbdNode);
//3把这棵子树加到div对象下面
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
</script>
</head>
<body>
<input type="button" value="创建表格" onclick="createTable()" />
<hr/>
<div></div>
</body>
</html>
360浏览器8.1 演示结果：
点击按钮：就创建一个表格：
二、表格创建–用table对象和tr对象中现有的方法来操纵表格
代码演示：
<html>
<head>
<title>DHTML技术演示---表格创建--用table对象和tr对象中现有的方法来操纵表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
table {
border:#ff80ff;
width:800px;
border-collapse:collapse;
/*separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
*/
}
table td{
border:#0000ff 1px solid;
padding:5px;
}
</style>
<script type="text/javascript">
function createTable(){
var oTableNode = document.createElement("table");
var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
oTdNode.innerHTML="单元格中的内容";
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
function createTable2(){
var oTableNode = document.createElement("table");//创建表格对象
//多行多列的表格,如5*6
for(var x=1;x<=5;x++){
var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
for(var y=1;y<=6;y++){
var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
}
}
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
//用户自定义行号与列号的方式创建表格
function createTable3(){
var oTableNode = document.createElement("table");//创建表格对象
//给表格动态地添加属性(id)
//法1
//oTableNode.id = "tableId";//变量方式
//法2
oTableNode.setAttribute("id","tableId");//函数方式
//由用户指定行数和列数的表格
//获取用户输入飞行数和列数
var rowNum =parseInt(document.getElementsByName("rowNum")[0].value);
var colNum =parseInt(document.getElementsByName("colNum")[0].value);
//健壮性防护
if(isNaN(rowNum) || isNaN(colNum) || rowNum<=0 || colNum<=0 ){
alert("行号和列号必须是大于0的整数");
return;
}
for(var x=1; x<=rowNum;x++){
//往表格对象中插入一个tr对象（空行），并返回该tr对象
var oTrNode =oTableNode.insertRow();
for(var y=1;y<=colNum;y++){
//往tr对象中插入一个Cell即td对象
var oTdNode = oTrNode.insertCell();
oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
}
}
document.getElementsByTagName("div")[0].appendChild(oTableNode);
}
//删除指定行
function delRow(){
//由指定的id来获取该表格
var oTableNode = document.getElementById("tableId");
//alert(oTableNode.nodeName);//TABLE
//alert(oTableNode);
//防护
if(oTableNode==null){
alert("表格不存在");
return;
}
//删除行的处理代码
//获取用户输入的行号
var delRowNum = parseInt(document.getElementsByName("delRowNum")[0].value);
//alert(delRowNum);
//行号的健壮性防护
if(isNaN(delRowNum) ){
alert("行号必须是数字");
return;
}
if(!(delRowNum>0 && delRowNum<=oTableNode.rows.length)){
alert("该行不存在!");
return;
}
//删除行
oTableNode.deleteRow(delRowNum-1);
}
//删除指定的列
function delCol(){
//由指定id来获取该表格
var oTableNode = document.getElementById("tableId");
//alert(oTableNode.nodeName);
//alert(oTableNode);
//防护
if(oTableNode==null){
alert("表格不存在!");
return;
}
//删除列的处理代码
//获取用户输入的列号
var delColNum = parseInt(document.getElementsByName("delColNum")[0].value);
//alert(delColNum);
//行号的健壮性防护
if(isNaN(delColNum)){
alert("列号必须是数字");
return ;
}
if(!(delColNum>0 && delColNum<=oTableNode.rows[0].cells.length)){
alert("该列不存在!");
return;
}
//删除列:※※表格中没有现成的删除列的函数，因此只能自己遍历行，然后通过tr对象中的deleteCell来实现
for(var x=0;x<oTableNode.rows.length;x++){
oTableNode.rows[x].deleteCell( delColNum-1 );
}
}
</script>
</head>
<body>
<input type="button" value="创建表格" onclick="createTable()" />
<input type="button" value="创建多行多列表格" onclick="createTable2()" />
<br/><br/><br/>
<!--添加-->
行数:<input type="text" name="rowNum" />
列数:<input type="text" name="colNum" />
<input type="button" value="创建表格" onclick="createTable3()" />
<br/><br/><br/>
<!--删除-->
<h3>删除前面由用户指定行列号方式创建的表格</h3>
行号:<input type="text" name="delRowNum"/>
<input type="button" value="删除行" onclick="delRow()" />
列号:<input type="text" name="delColNum"/>
<input type="button" value="删除列" onclick="delCol()" />
<hr/>
<div></div>
</body>
</html>
360浏览器8.1 演示结果：
创建一个9行9列的表格，然后删除了第二行和第二列
三、表格中页面中的显示操纵–行间隔高亮显示
代码演示：
<html>
<head>
<title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
@import url(table.css);
.one{
background:#00ff00;
}
.two{
background:rgb(210,0,0);
}
</style>
<script type="text/javascript">
function trColor(){
var oTableNode = document.getElementById("dataTable");
var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
for(var x=1;x<arrTrs.length; x++){
if(x%2==1){
arrTrs[x].className="one";
}else{
arrTrs[x].className="two";
}
}
}
//onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
//但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
onload=function(){
trColor();
//还可以在这里写其它代码，甚至调用其它函数
};
//这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
//而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
</script>
</head>
<body>
<table id="dataTable">
<tr>
<th>姓名</th> <th>年龄</th> <th>地址</th>
</tr>
<tr>
<td>张三</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>李四</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>王五</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Jack</td> <td>23</td> <td>湖南长沙</td>
</tr>
<tr>
<td>Rose</td> <td>23</td> <td>湖南长沙</td>
</tr>
</table>
</body>
</html>
table.css:
table {
border:#ff80ff 1px solid;
/*solid : 实线边框 */
width:800px;
border-collapse:collapse;
/*separate : 默认值。边框独立（标准HTML）
collapse : 相邻边被合并
*/
}
table td{/*table 下面的td*/
border:#0000ff 1px solid;
padding:5px;/*内补丁*/
}
table th{
border:#ff80ff 1px solid;
padding:5px;
background-color:#c0c0c0;
}360浏览器8.1 演示结果：
JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式的更多相关文章
- JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)
这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...
- JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件
本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...
- JavaScript---网络编程(10)--DHTML技术演示(3)-多选框
这节讲述多选框的使用,当然,肯定是结合css和Javascript一起的. checkbox的使用1: 演示代码: <html> <head> <meta http-eq ...
- JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强
对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html> <head> <title>DHTML技术演示---表格中页 ...
- JavaScript---网络编程(8)-DHTML技术演示(1)
DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程 ...
- java基础-网络编程（Socket）技术选型入门之NIO技术
java基础-网络编程(Socket)技术选型入门之NIO技术 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.传统的网络编程 1>.编写socket通信的MyServer ...
- Java基础知识强化之网络编程笔记19：Android网络通信之 HttpClient和传统Post、Get方式的区别
1. HttpClient是什么 ? HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 ...
- Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合
操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...
- JavaScript对象创建的几种方式
1 工厂模式 1.1 创建 function createFruit(name,colors) { var o = new Object(); o.name = name; o.colors = co ...
随机推荐
- Codevs 1507 酒厂选址
1507 酒厂选址 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 传送门 题目描述 Description Abstinence(戒酒)岛的居民们酷爱一种无酒精啤酒 ...
- Headfirst设计模式的C++实现——简单工厂模式(Simple Factory)
Pizza.h #ifndef _PIZZA_H #define _PIZZA_H #include <iostream> #include <string> class Pi ...
- 犯这个错误的肯定不止我一个 关于File
File.Create(string filePath)这种用法所有人都知道,这两天用到的时候却发现一个问题. 需要先判断文件是否存在,如果不存在则创建文件,然后向该文件写入数据,后续定时Append ...
- 解决php的$美元符号与Zen Coding冲突问题
Zen Coding插件就不介绍了. 众所周知,安装了插件以后,输入$符号会被自动解析为相应的数字1.2.3... 作为一名PHP程序员,想要通过其定义一些自己常用的代码.却发现展开以后悲剧的发现$符 ...
- Vim粘贴代码时缩进混乱
Vim粘贴代码时缩进混乱 via 背景 在终端Vim中粘贴代码时,发现插入的代码会有多余的缩进,而且会逐行累加.原因是终端把粘贴的文本存入键盘缓存(Keyboard Buffer)中,Vim则把这些内 ...
- 【C语言】中的布尔类型
C语言中的布尔类型 一.相关基础知识 首先bool true false为C++中的关键字,C语言中默认不支持这几个字符! 二.具体内容 在C89 (ANSI C)标准中没有定义与布尔类型相关的内 ...
- mysql-5.5.25-winx64在win7 x64 免安装配置
os:win7 x64 mysql:mysql-5.5.25-winx64 将mysql-5.5.25-winx64.zip 解压缩到F:\mysql-5.5.25-winx64 目录下: 1.将my ...
- Mvc学习笔记(2)
Razor模板的具体语法使用 因为Razor模板的可以自动识别<>,大大减少了代码量,本节我们一起来探究Razor模板的语法的简单应用: MVC知识点: 1.ASP.NET Mvc框架 是 ...
- 2、.net NVelocity中原生javascript ajax封装使用
在页面上,我们经常会遇到局部刷新的例子,这个时候,就需要用到ajax, 因为很多代码都是公用的,所以我们想到了,将代码封装,简化了使用,减少了冗余 javascript ajax代码如下: var x ...
- ubuntu下SVN服务器安装配置
SVN服务器端: 1.安装包 $ sudo apt-get install subversion 2.添加svn管理用户及subversion组 $ sudo adduser svnuser $ su ...