javascript动态创建表格_动态创建行,单元格javascricp代码-CSDN博客

<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>qingyuan-huake Table-page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	
	<[originalSource： http://jeoff.blog.51cto.com/186264/225188 ]>
	
	... <[JavaScript 闭包究竟是什么 ]>
	... http://kb.cnblogs.com/page/110782/
	
	|| 2000*5 的表格, 每个单元格的内容为: 行号 + 逗号 + 列号 || 
	templateSource list here：
	var oTable = document.getElementById("originalTable");
    var r = oTable.insertRow();
    var c1 = r.insertCell();
    c1.innerHTML = "<label>" + (i + 1) + "</label>";
    
    每个单元格可以设置不同的form元素:<["\",\""]>
    var c = r.insertCell();
    c.innerHTML = "<select name ='" + "org" + i + "' id ='" + "org" + i + "' 
                           value='" + organizationMode + "' 
                           style='width: 98%' 
                           disabled='true' 
                           οnchange='javascript:setParams()'>" 
                           + "<option value='0'></option>"
                           + "</select> ";
    
	-->
	<script type="text/javascript">
	
	  // 测试耗时方法,用于比较创建表格的优劣
	  function showFunctionRunTime(f)
	  {
	      var t1 = new Date();
          f();
          var t2 = new Date();
          alert(t2-t1);
	  }
	
	  // TimeCost: 29752 <ms>
	  // 方法一: 使用createElement生成表格，使用insertRow和insertCell方法生成行列，单元格的内容使用innerHTML属性进行填充
	  function createTable() 
	  {
	      var t = document.createElement('table');
	      for (var i = 0; i < 2000; i++)
	      {
	         var r = t.insertRow();
	         for (var j = 0; j < 5; j++)
	         {
	             var c = r.insertCell();
	             c.innerHTML = i + ',' + j;
	         }
	      }
	      
	      document.getElementById('originalTab').appendChild(t);
	      t.setAttribute('border', '1');
	  }
	  
	  // TimeCost: 1370 <ms>
	  // 方法二：  使用createElement生成表格，使用CreateElement方法生成行列，单元格的内容使用了createTextNode方法填充
	   function createTable2() 
	   {
           var t = document.createElement('table');
           var b = document.createElement('tbody');
           for (var i = 0; i < 2000; i++) 
           {
               var r = document.createElement('tr');
               for (var j = 0; j < 5; j++) 
               {
                  var c = document.createElement('td');
                  var m = document.createTextNode(i + ',' + j);
                   c.appendChild(m);
                   r.appendChild(c);
                }
                
                 b.appendChild(r);
            }
       
            t.appendChild(b);
            document.getElementById('originalTab').appendChild(t);
            t.setAttribute('border', '1');
       }
   
       // TimeCost: 204 <ms>
       // 方法三: 拼接表格innerHTML属性的字符串，使用字符串 += 操作符链接字符串
       function createTable3() 
       {
         var data = '';
    
             data += '<table border=1><tbody>';
             for (var i = 0; i < 2000; i++) 
             {
                 data += '<tr>';
                 for (var j = 0; j < 5; j++) 
                 {
                     data += '<td>' + i + ',' + j + '</td>';
                 }
                  data += '</tr>';
              }
            data += '</tbody><table>';
       
            document.getElementById('originalTab').innerHTML = data;
        } 
        
        // TimeCost: 163 <ms>
        // 方法四: 拼接表格innerHTML属性的字符串，各个字符串追加数组里面，最后调用数组的join方法生成目标字符串
        function createTable4() 
        { 
           var data = new Array();
    
           data.push('<table border=1><tbody>');
           for (var i = 0; i < 2000; i++) 
           {
               data.push('<tr>');
                for (var j = 0; j < 5; j++) 
                {
                  data.push('<td>' + i + ',' + j + '</td>');
                }
                data.push('</tr>');
            }
            data.push('</tbody><table>');
       
            document.getElementById('originalTab').innerHTML = data.join('');
         } 
	</script>
  </head>
  
  <body>
     <div id="originalTab" style="border: 1px solid black"></div>
     
     <!-- body内部的JavaScript 按加载顺序执行 -->
     <script type="text/javascript">
        showFunctionRunTime(createTable);
        showFunctionRunTime(createTable2);
        showFunctionRunTime(createTable3);
        showFunctionRunTime(createTable4);
     </script>
  </body>
</html>

复习下javascript 数组的操作:[最重要是 push(); pop(); length; join();]

var arraObj = new Array();
var arraObj = new Array([size]);
var arraObj = new Array([eleme0[,element[,...]]])

数组元素的赋值和获取值:
var arrayObj = arrayO[1];
array0[1] = "new_value";

arrayObj.push([eleme0[,element[,...]]]) //将一个或多个元素添加到数组的结尾,并且返回数组的新长度
arrayObj.unshift([eleme0[,element[,...]]]) //将一个元素或多个元素添加到数组的开始,并且返回数组新长度
arrayObj.splice(insertPos, 0, [eleme0[,element[,...]]]) //将一个或多个新元素插入到数组指定的位置

// 数组元素的删除:
arrayObj.pop() // 移除最后一个元素并且返回该元素值
arrayObj.shift() // 移除最前面的一个元素并且返回该元素值,数组中的元素自动前移
arrayObj.splice(deletePos, deleteCount); //删除指定位置的元素

// 截取和合并
arrayObj.slice(start, [end]); //以数组的形式返回数组的一部分
arrayObj.concat([eleme0[,element[,...]]]); //将多个数组连接为一个数组,返回连接好的数组

// 数组元素的排序
arrayObj.reverse();
arrayObj.sort();

// 数组元素的字符串
arrayObj.join(separator); //返回字符串,每个元素连接在一起,用separate分开;


// 数组的属性
arrayObj.length;
arrayObj.prototype;
arrayObj.constructor;

   返回对象类型原型的引用,prototype 属性是object 共有的:
   objectName.prototype
   objectName 是object对象的名称,对象的新实例是"继承"赋予该对象原型的操作
   对于数组对象, 以下例子说明 prototype属性的用途:
    
   给数组对象添加返回数组中最大元素值的方法。要完成这一点，声明一个函数，将它加入 Array.prototype， 并使用它。

function array_max( )

{

   var i, max = this[0];

   for (i = 1; i < this.length; i++)

   {

   if (max < this[i])

   max = this[i];

   }

   return max;

}

Array.prototype.max = array_max;
var x = new Array(1, 2, 3, 4, 5, 6);
var y = x.max( );
该代码执行后，y 保存数组 x 中的最大值，或说 6。

constructor 属性

表示创建对象的函数。
object.constructor //object是对象或函数的名称。
说明：constructor 属性是所有具有 prototype 的对象的成员。它们包括除 Global 和 Math 对象以外的所有 
JScript 固有对象。constructor 属性保存了对构造特定对象实例的函数的引用。

例如：

x = new String("Hi");
if (x.constructor == String) // 进行处理（条件为真）。

或
function MyFunc {

// 函数体。

}

y = new MyFunc;
if (y.constructor == MyFunc) // 进行处理（条件为真）。