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 ...
随机推荐
- 【技术·水】浅谈Dism++清理插件开发
前言 昨天我发布了NCleaner,一款Dism++清理插件(地址:http://bbs.pcbeta.com/viewthread-1692182-1-1.html) 有些人想要我开源NCleane ...
- 基于ACE的定时器模板类
ACETimerClockGenerator.h ClockGeneratorIF.h 在类中定义一个结构体,在结构体中定义一个函数. 在结构体中定义一个函数,这样做有什么好呢? TimerHandl ...
- ASP.NET服务端基本控件介绍
ASP.NET服务端基本控件介绍 大概分为三种控件: HTML控件,ASP.NET把HTML控件当成普通字符串渲染到浏览器端,不去检查正确性,无法在服务端进行处理ASP.NET服务端控件,经过ASP. ...
- Check Mysql Database Size
SELECT ROUND( SUM(data_length + index_length) / 1024 / 1024 ) TOTAL_MB, ROUND(SUM(data_length) / 102 ...
- make makefile
Gcc的编译流程预处理阶段: gcc –E hello.c –o hello.i编译阶段: gcc –S hello.i –o hello.s汇编阶段:gcc –c hello.s –o hello. ...
- JavaScript学习总结【11】、JS 运动
动画效果在网站中是一种非常常见的交互式体验效果,比如侧边栏分享.图片淡入淡出,我们把这种动画效果就叫做运动,也就是让物体动起来.如果想让一个物体动起来,无非就是改变它的速度,也就是改变属性值,比如 l ...
- 服务器返回的JSON字符串
异步请求将type设为"json",或者利 用$.getJSON()方法获得服务器返回,那么就不需要eval()方法,因为这时候得到的结果已经是json对象
- html5 API
1.Canvas绘图 2.postMessage跨域.多窗口传输 3.requestAnimationFrame动画 4.PageVisibility API页面可见性 5.File 本地文件操作 6 ...
- POJ 1459 Power Network 最大流（Edmonds_Karp算法）
题目链接: http://poj.org/problem?id=1459 因为发电站有多个,所以需要一个超级源点,消费者有多个,需要一个超级汇点,这样超级源点到发电站的权值就是发电站的容量,也就是题目 ...
- Servlet和Tomcat部署
今天有空写个Servlet来玩一下.用EditPlus写一个简单的Servlet,FirstServlet.java,如下: import java.io.IOException; import ja ...