一：用最底层的方式，该方式用来创建别的对象树也可以

代码演示：

<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*6for(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";//变量方式//法2oTableNode.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" /> &nbsp;&nbsp;列数:<input type="text" name="colNum" /> <input type="button" value="创建表格" onclick="createTable3()" /><br/><br/><br/><!--删除--><h3>删除前面由用户指定行列号方式创建的表格</h3>行号:<input type="text" name="delRowNum"/> &nbsp;&nbsp;<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---网络编程(9-2)--DHTML技术演示(2-2)-表格加强
对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html><head><title>DHTML技术演示---表格中页面中 ...
JavaScript---网络编程(8)-DHTML技术演示(1)
DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程 ...
JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)
这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...
栈溢出脚本_漏洞练习之网络编程与堆栈溢出技术
0x00 公众号之前发过Exploit-Exercise之Nebula实践指南,Exploit-Exercise一共有5个镜像可供练习,如下所示本系列文章将会介绍第二个镜像Protostar的通关经 ...
上周技术关注：敏捷开发的另一种方式--Scrum
[敏捷; 项目管理] 敏捷开发的另一种方式--Scrum # 不知道在XP大型其道的今天,有多少人知道Scrum,并亲身实验过? 最关键是你用它多久了.之前除了使用自己自定制的Excel表格来完成Sc ...
linux 查看网络流量来源_详解Linux查看实时网卡流量的几种方式
在工作中,我们经常需要查看服务器的实时网卡流量.通常,我们会通过这几种方式查看Linux服务器的实时网卡流量. 1. sar -n DEV 1 2 sar命令包含在sysstat工具包中,提供系统的众 ...
Java网络编程从入门到精通（25）：创建ServerSocket对象
ServerSocket类的构造方法有四种重载形式,它们的定义如下: public ServerSocket() throws IOException public ServerSocket(int ...
Java网络编程从入门到精通（2）：创建InetAddress对象的四个静态方法
InetAddress类是Java中用于描述IP地址的类.它在java.net包中.在Java中分别用Inet4Address和Inet6Address类来描述IPv4和IPv6的地址.这两个类都是I ...
python卸载_技术 | Python 包安装和卸载的几种方式
黑马程序员微信号:heiniu526 传智播客旗下互联网资讯,学习资源免费分享平台同学对于python包的安装卸载和简单管理操作并熟练,通过简单介绍集中常用的包管理的方式,让其能够在需要安装第三方 ...

JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式

一：用最底层的方式，该方式用来创建别的对象树也可以

代码演示：

360浏览器8.1 演示结果：

二、表格创建–用table对象和tr对象中现有的方法来操纵表格

代码演示：

360浏览器8.1 演示结果：

三、表格中页面中的显示操纵–行间隔高亮显示

代码演示：

360浏览器8.1 演示结果：

JavaScript---网络编程(9-1)--DHTML技术演示(2-1)-表格创建的几种方式相关推荐

最新文章

热门文章