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

代码演示：

  1. <html>
  2.   <head>
  3.     <title>DHTML技术演示---表格创建--用最底层的方式，其实该方式用来创建别的对象树也可以</title>
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.     <style type="text/css">
  6.         table{
  7.             border:#ff80ff;
  8.             width:500px;
  9.             border-collapse:collapse;
  10.         }
  11.         table td{
  12.             border:#0000ff 1px solid;
  13.             padding:5px;/*内补丁*/
  14.         }
  15.     </style>
  16.     <script type="text/javascript">
  17.         function createTable(){
  18.             //思路: 把表格子树中的每个节点对象创建出来，然后把这些对象组装成一棵树。最后再把这棵树挂到div对象下面
  19.             //1通过document.createElement()创建每个标签对象
  20.             var oTableNode = document.createElement("table");
  21.             var oTbdNode = document.createElement("tbody");
  22.             var oTrNode = document.createElement("tr");
  23.             var oTdNode = document.createElement("td");
  24.             oTdNode.innerHTML="单元格中的内容";
  25.             //2把以上节点组装成一棵树
  26.             oTrNode.appendChild(oTdNode);
  27.             oTbdNode.appendChild(oTrNode);
  28.             oTableNode.appendChild(oTbdNode);
  30.             //3把这棵子树加到div对象下面
  31.             document.getElementsByTagName("div")[0].appendChild(oTableNode);
  32.         }
  34.     </script>
  36.   </head>
  38.   <body>
  39.     <input type="button" value="创建表格" onclick="createTable()" />
  40.     <hr/>
  41.     <div></div>
  43.   </body>
  44. </html>

360浏览器8.1 演示结果：

点击按钮：就创建一个表格：

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

代码演示：

  1. <html>
  2.   <head>
  3.     <title>DHTML技术演示---表格创建--用table对象和tr对象中现有的方法来操纵表格</title>
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.     <style type="text/css">
  6.         table {
  7.             border:#ff80ff;
  8.             width:800px;
  9.             border-collapse:collapse;
  10.             /*separate  :　 默认值。边框独立（标准HTML）
  11.             collapse  :　 相邻边被合并
  12.             */
  13.         }
  14.         table td{
  15.             border:#0000ff 1px solid;
  16.             padding:5px;
  17.         }
  18.      </style>
  19.      <script type="text/javascript">
  20.         function createTable(){
  21.             var oTableNode = document.createElement("table");
  22.             var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
  23.             var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
  24.             oTdNode.innerHTML="单元格中的内容";
  25.             document.getElementsByTagName("div")[0].appendChild(oTableNode);
  26.         }
  28.         function createTable2(){
  29.             var oTableNode = document.createElement("table");//创建表格对象
  31.             //多行多列的表格,如5*6
  32.             for(var x=1;x<=5;x++){
  34.                 var oTrNode = oTableNode.insertRow();//往表格对象中插入一个tr对象(空行),并返回该tr对象
  35.                 for(var y=1;y<=6;y++){
  36.                     var oTdNode = oTrNode.insertCell();//往tr对象中插入一个Cell即td对象
  37.                     oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
  38.                 }
  39.             }
  40.             document.getElementsByTagName("div")[0].appendChild(oTableNode);
  41.         }
  43.         //用户自定义行号与列号的方式创建表格
  44.         function createTable3(){
  45.             var oTableNode = document.createElement("table");//创建表格对象
  46.             //给表格动态地添加属性(id)
  47.             //法1
  48.             //oTableNode.id = "tableId";//变量方式
  49.             //法2
  50.             oTableNode.setAttribute("id","tableId");//函数方式
  52.             //由用户指定行数和列数的表格
  53.             //获取用户输入飞行数和列数
  54.             var rowNum =parseInt(document.getElementsByName("rowNum")[0].value);
  55.             var colNum =parseInt(document.getElementsByName("colNum")[0].value);
  57.             //健壮性防护
  58.             if(isNaN(rowNum) || isNaN(colNum) || rowNum<=0 || colNum<=0 ){
  59.                 alert("行号和列号必须是大于0的整数");
  60.                 return;
  61.             }
  63.             for(var x=1; x<=rowNum;x++){
  64.                 //往表格对象中插入一个tr对象（空行），并返回该tr对象
  65.                 var oTrNode =oTableNode.insertRow();
  66.                 for(var y=1;y<=colNum;y++){
  67.                     //往tr对象中插入一个Cell即td对象
  68.                     var oTdNode = oTrNode.insertCell();
  69.                     oTdNode.innerHTML="单元格"+x+"-"+y+"中的内容";
  70.                 }
  71.             }
  72.             document.getElementsByTagName("div")[0].appendChild(oTableNode);
  73.         }
  75.         //删除指定行
  76.         function delRow(){
  77.             //由指定的id来获取该表格
  78.             var oTableNode = document.getElementById("tableId");
  79.             //alert(oTableNode.nodeName);//TABLE
  80.             //alert(oTableNode);
  81.             //防护
  82.             if(oTableNode==null){
  83.                 alert("表格不存在");
  84.                 return;
  85.             }
  87.             //删除行的处理代码
  88.             //获取用户输入的行号
  89.             var delRowNum = parseInt(document.getElementsByName("delRowNum")[0].value);
  91.             //alert(delRowNum);
  92.             //行号的健壮性防护
  93.             if(isNaN(delRowNum) ){
  94.                 alert("行号必须是数字");
  95.                 return;
  96.             }
  97.             if(!(delRowNum>0 && delRowNum<=oTableNode.rows.length)){
  98.                 alert("该行不存在!");
  99.                 return;
  100.             }
  101.             //删除行
  102.             oTableNode.deleteRow(delRowNum-1);
  103.         }
  105.         //删除指定的列
  106.         function delCol(){
  107.             //由指定id来获取该表格
  108.             var oTableNode = document.getElementById("tableId");
  109.             //alert(oTableNode.nodeName);
  110.             //alert(oTableNode);
  111.             //防护
  112.             if(oTableNode==null){
  113.                 alert("表格不存在!");
  114.                 return;
  115.             }
  116.             //删除列的处理代码
  117.             //获取用户输入的列号
  118.             var delColNum = parseInt(document.getElementsByName("delColNum")[0].value);
  120.             //alert(delColNum);
  121.             //行号的健壮性防护
  122.             if(isNaN(delColNum)){
  123.                 alert("列号必须是数字");
  124.                 return ;
  125.             }
  127.             if(!(delColNum>0 && delColNum<=oTableNode.rows[0].cells.length)){
  128.                 alert("该列不存在!");
  129.                 return;
  130.             }
  131.             //删除列:※※表格中没有现成的删除列的函数，因此只能自己遍历行，然后通过tr对象中的deleteCell来实现
  132.             for(var x=0;x<oTableNode.rows.length;x++){
  133.                 oTableNode.rows[x].deleteCell( delColNum-1 );
  134.             }
  135.         }
  137.      </script>
  139.   </head>
  141.   <body>
  142.     <input type="button" value="创建表格" onclick="createTable()" />
  143.     <input type="button" value="创建多行多列表格" onclick="createTable2()" />
  144.     <br/><br/><br/>
  145.     <!--添加-->
  146.     行数:<input type="text" name="rowNum" /> &nbsp;&nbsp;
  147.     列数:<input type="text" name="colNum" />
  148.     <input type="button" value="创建表格" onclick="createTable3()" />
  149.     <br/><br/><br/>
  151.     <!--删除-->
  152.     <h3>删除前面由用户指定行列号方式创建的表格</h3>
  153.     行号:<input type="text" name="delRowNum"/> &nbsp;&nbsp;
  154.     <input type="button" value="删除行" onclick="delRow()" />
  155.     列号:<input type="text" name="delColNum"/>
  156.     <input type="button" value="删除列" onclick="delCol()" />
  158.     <hr/>
  160.     <div></div>
  161.   </body>
  162. </html>

360浏览器8.1 演示结果：

创建一个9行9列的表格，然后删除了第二行和第二列

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

代码演示：

  1. <html>
  2.   <head>
  3.     <title>DHTML技术演示---表格中页面中的显示操纵--行间隔高亮显示</title>
  4.     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  5.     <style type="text/css">
  6.         @import url(table.css);
  7.         .one{
  8.             background:#00ff00;
  9.         }
  10.         .two{
  11.             background:rgb(210,0,0);
  12.         }
  13.     </style>
  14.     <script type="text/javascript">
  15.         function trColor(){
  16.             var oTableNode = document.getElementById("dataTable");
  17.             var arrTrs = oTableNode.rows;//rows为表格属性，返回所以的行
  18.             for(var x=1;x<arrTrs.length; x++){
  19.                 if(x%2==1){
  20.                     arrTrs[x].className="one";
  21.                 }else{
  22.                     arrTrs[x].className="two";
  23.                 }
  24.             }
  25.         }
  26.         //onload = trColor();//这种方式赋值就是执行(本例中，这一句没有效果，因为table对象还没出来。
  27.         //但如果把该段代码放在<table>之后则有效果)，而且只能执行这一个方法
  29.         onload=function(){
  30.             trColor();
  31.             //还可以在这里写其它代码，甚至调用其它函数
  32.         };
  33.         //这种方式只是给onload事件注册响应函数，解析该句代码时函数并没有执行
  34.         //而是在该事件发生时才会调用。并且可以在function()中调用多个函数.
  36.     </script>
  38.   </head>
  40.   <body>
  41.         <table id="dataTable">
  42.             <tr>
  43.                 <th>姓名</th> <th>年龄</th> <th>地址</th>
  44.             </tr>
  46.             <tr>
  47.                 <td>张三</td> <td>23</td> <td>湖南长沙</td>
  48.             </tr>
  49.             <tr>
  50.             <td>李四</td> <td>23</td> <td>湖南长沙</td>
  51.             </tr>
  52.             <tr>
  53.                 <td>王五</td> <td>23</td> <td>湖南长沙</td>
  54.             </tr>
  55.             <tr>
  56.                 <td>Jack</td> <td>23</td> <td>湖南长沙</td>
  57.             </tr>
  58.             <tr>
  59.                 <td>Rose</td> <td>23</td> <td>湖南长沙</td>
  60.             </tr>
  61.             <tr>
  62.                 <td>Jack</td> <td>23</td> <td>湖南长沙</td>
  63.             </tr>
  64.             <tr>
  65.                 <td>Rose</td> <td>23</td> <td>湖南长沙</td>
  66.             </tr>
  67.             <tr>
  68.                 <td>Jack</td> <td>23</td> <td>湖南长沙</td>
  69.             </tr>
  70.             <tr>
  71.                 <td>Rose</td> <td>23</td> <td>湖南长沙</td>
  72.             </tr>
  73.         </table>
  75.   </body>
  76. </html>

table.css:

  1. table {
  2.     border:#ff80ff 1px solid;
  3.     /*solid  :　 实线边框 */
  4.     width:800px;
  5.     border-collapse:collapse;
  6.     /*separate  :　 默认值。边框独立（标准HTML）
  7.     collapse  :　 相邻边被合并
  8.     */
  9. }
  10. table td{/*table 下面的td*/
  11.     border:#0000ff 1px solid;
  12.     padding:5px;/*内补丁*/
  13. }
  14. table th{
  15.     border:#ff80ff 1px solid;
  16.     padding:5px;
  17.     background-color:#c0c0c0;
  18. }

360浏览器8.1 演示结果：

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

  1. JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)

    这里不进行很复杂的后台验证以及JavaScript的正则表达式,只是简单的介绍下这个技术,简单的后台接收与跳转,大概了解怎么验证的就可以.具体的技术,我后面还会继续写博客的.本人也还在学习中. 表单验 ...

  2. JavaScript---网络编程(11)--DHTML技术演示(4)-单选框/下拉菜单/添加文件

    本节讲述单选框/下拉菜单/添加文件,综合css,html和JavaScript. 单选框: 实现的功能是:(类似平时的性格测试) 先隐藏一部分页面,然后通过点击单选框来显示. 再通过选项的选择-(每个 ...

  3. JavaScript---网络编程(10)--DHTML技术演示(3)-多选框

    这节讲述多选框的使用,当然,肯定是结合css和Javascript一起的. checkbox的使用1: 演示代码: <html> <head> <meta http-eq ...

  4. JavaScript---网络编程(9-2)--DHTML技术演示(2-2)-表格加强

    对上篇博客的最后那个表格隔行高亮显示加了个功能,鼠标监听和年龄从小到大排序. 演示代码: <html> <head> <title>DHTML技术演示---表格中页 ...

  5. JavaScript---网络编程(8)-DHTML技术演示(1)

    DHTML技术使用的基本思路: 1. 用标签封装数据-html范畴 2. 定义样式-css范畴 3. 明确事件源.事件和要处理的节点-dom范畴 4. 明确具体的操作方式,其实就是事件的处理内容(过程 ...

  6. java基础-网络编程（Socket）技术选型入门之NIO技术

    java基础-网络编程(Socket)技术选型入门之NIO技术 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.传统的网络编程 1>.编写socket通信的MyServer ...

  7. Java基础知识强化之网络编程笔记19：Android网络通信之 HttpClient和传统Post、Get方式的区别

    1. HttpClient是什么 ?     HTTP 协议可能是现在 Internet 上使用得最多.最重要的协议了,越来越多的 Java 应用程序需要直接通过 HTTP 协议来访问网络资源.虽然在 ...

  8. Javascript高级编程学习笔记（45）——DOM 操作表格及DOM动态集合

    操作DOM表格 早些时候,HTML 还是以表格布局为主, 所以DOM操作表格是比较重要的一点 但是现如今 有其它的选择,所以表格的操作也就慢慢地淡出了人们的视线 所以这里也就不过多去详细展开,这里也就 ...

  9. JavaScript对象创建的几种方式

    1 工厂模式 1.1 创建 function createFruit(name,colors) { var o = new Object(); o.name = name; o.colors = co ...

随机推荐

  1. LevelDB windows vs2013 c++编译和测试

    引用: (src1) :http://download.csdn.net/detail/flyfish1986/8881263(这里有下载地址) (src2) :http://blog.csdn.ne ...

  2. 16_AOP入门准备_动态代理模式

    [工程截图] [PersonDao.java] package com.HigginCui.daoProxy; //目标类接口 public interface PersonDao { public ...

  3. Codevs 5208 求乘方取模

    5208 求乘方取模 时间限制: 1 s 空间限制: 1000 KB 题目等级 : 未定级 题目描述 Description 给定非负整数A.B.M,求(A ^ B) mod M. 输入描述 Inpu ...

  4. C++数组（指针）作为函数参数

    本文的学习内容参考:http://blog.csdn.net/wwdlk/article/details/6322843 1.当用数组名作为函数参数时,函数的实参和形参都应为数组名(或者指针): Ex ...

  5. Installshield: custom action return value

    参考:MSDN: Custom Action Return Values 参考:MSDN: Logging of Action Return Values

  6. 使用GitHub For Windows托管Visual Studio项目

    本文写得比较早,更新的在VS上使用GitHub的文章请移步:Visual Stuido 2015 Community 使用 GitHub 插件 因为最近同时再看很多技术方面的书,书上的例子有很多自己想 ...

  7. Object-API-NSLog

    NSLog中的基础数据类型 输出格式: NSLog("") char: %c short int: %hi %hx %ho unsigned short int: %hu %hx ...

  8. 解决UIScrollView 的点击事件

    目前有两种方法 第一种 通过 Category 扩展 UIScrollView 对象,添加触摸事件,(不建议,后续扩展不方便)代码如下 @implementation UIScrollView (Ex ...

  9. Php之Http请求urlencode/rawurlencode

    在http请求中,如果参数值带中文最好使用urlencode/rawurlencode函数. 如果参数值中带加号也最好使用,否则后台接收时,+号变成空格,引起不必要的麻烦. 注:urlencode和r ...

  10. webapp中的日期选择

    你是否在开发webapp时,选择用哪种第三方日期选择控件绞尽脑汁? 其实不用那么麻烦,现在移动端都是WebKit内核,支持HTML5,其实只要弱弱的将input中将type="date&qu ...