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 ...
随机推荐
- HDU 4089 Activation（概率DP）（转）
11年北京现场赛的题目.概率DP. 公式化简起来比较困难....而且就算结果做出来了,没有考虑特殊情况照样会WA到死的.... 去参加区域赛一定要考虑到各种情况. 像概率dp,公式推出来就很容易写 ...
- 【C++11】新特性——Lambda函数
本篇文章由:http://www.sollyu.com/c11-new-lambda-function/ 文章列表 本文章为系列文章 [C++11]新特性--auto的使用 http://www.so ...
- python 自动化之路 day 02
本节内容: 列表.元组操作 字符串操作 1. 列表.元组操作 列表是我们最以后最常用的数据类型之一,通过列表可以对数据实现最方便的存储.修改等操作 定义列表 1 names = ['Alex',&qu ...
- 【转】PHP程序员的技术成长规划
按照了解的很多PHP/LNMP程序员的发展轨迹,结合个人经验体会,抽象出很多程序员对未来的迷漫,特别对技术学习的盲目和慌乱,简单梳理了这个每个阶段PHP程序员的技术要求,来帮助很多PHP程序做对照设定 ...
- O_NONBLOCK模式下写fifo的注意事项
后台网络通信框架一般采用fifo来作为事件通知的机制:创建一个fifo,然后以非阻塞读和非阻塞写的方式打开fifo,然后把fd加到epoll里面,作为通知网络事件的fd. 在这里有个隐晦的问题容易被忽 ...
- 常用js函数
1.获得元素到页面的绝对距离 function getPos(obj) { var pos = {left:0, top:0}; while (obj) { pos.left += obj.offse ...
- $(window)和$(document)
注意:本次测试采用的jquery1.9.1的版本 1. $(window).scrollTop() 和$(document).scrollTop()得出的结果是一样的 2. $(window).h ...
- get值乱码（gbk编码浏览器造成）
$condition = urldecode($condition); 即可
- cmake 安装 mysql
因为高版本mysql都用cmake安装,另外安装cluster版的mysql也必须通过cmake安装,所以学习cmake安装mysql很有必要. 今天我因为打算搭配一个mysql集群所以,在虚拟机上安 ...
- PYTHON 获取机器硬件信息及状态
#!/usr/bin/env python # encoding: utf-8 from optparse import OptionParser import os import re import ...