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 ...
随机推荐
- 关于C++对汉字拼音的处理(3)
之所以汉字转拼音的博文能出到3,主要是因为没有很完美的C++的解决方案,但是写到了这里可以有一个小结了. 以前的方法都有这种那种弊端,如果出现了无法识别的汉字(简体的)就无法修改处理了,但是下面的这种 ...
- csqlite编译相关配置问题
csqlite是非常好用的数据库,同时该数据库是开源的,基于一定原因可能需要编译自己需要的csqlite版本,那么下面介绍内容也会你就会感兴趣了. 这里要实现的目标是使用VS工具能够正确编译csqli ...
- EF 存储过程(上)
目前,EF对存储过程的支持并不完善.存在以下问题:> EF不支持存储过程返回多表联合查询的结果集.> EF仅支持返回某个表的全部字段,以便转换成对应的实体.无法支持返回部分字段的情况.&g ...
- mysql query insert中文乱码
mysql新建的表的charset都是utf8的. 在phpmyadmin里直接敲sql,中文可以insert进去的,但是在php代码里mysql_query同样的sql语句就是不行,保存到表里是乱码 ...
- vagrant 设置除默认工项目之外的synced_folder一个坑
vagrant和host共享的目录,模式是以host主机目录为主,vagrant目录为从,所以记住当你新建同步目录的时候一定要先把vagratn目录文件备份一下,不然会被host目录覆盖
- Python的面向对象2
我们接着讲解Python的面向对象 1.初始化实例属性 在现实生活中,一种类型的实例会具有相同的某些属性,把这些实例划分为一个类型,则这些实例必然有相似的部分.但是,在创建实例之后,我们一个一个的为实 ...
- uploadify实现七牛云存储 显示上传进度+页面显示
准备: uploadify下载地址: http://www.uploadify.com/download/ 七牛 php-sdk开发指南: http://developer.qiniu.com/doc ...
- C++ static全局变量与全局变量的区别／static全局函数与全局函数的区别
全局变量(外部变量)的说明之前再冠以static 就构成了静态的全局变量.全局变量本身就是静态存储方式, 静态全局变量当然也是静态存储方式.这两者在存储方式上并无不同.这两者的区别虽在于非静态全局变量 ...
- c# winform 隐藏tabcontrol标签
Apperarance 属性:Faltbuttons SizeMode属性:Fixed 各个TabPage的Text :空 ItemSize : Width=0;Height=1;
- BinaryReader 和BinaryWriter 读写类对象
using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.I ...