原生态 JavaScript 动态创建任意行数和列数的表格简单脚本 (简单Table ,object)

  1. <!DOCTYPE HTML>  
  2. <HTML>  
  3.   <head>  
  4.     <title>table</title>  
  5.     <script type="text/javascript" src="table.js"></script>  
  6.     <style type="text/css">  
  7.       *{  
  8.         margin:0px;  
  9.         padding:0px;  
  10.       }  
  11.       table tr td{  
  12.         border : 1px solid #ff0000;  
  13.         width  : 60px;  
  14.         height : 20px;  
  15.       }  
  16.     </style>  
  17.   </head>  
  18.   <body>  
  19.     <div id="wrapper">  
  20.     </div>  
  21.     <script type="text/javascript">  
  22.       window.onload=function(){  
  23.         var monitorTable={  
  24.            container : "wrapper",  
  25.                 name : "monitorTable",  
  26.                   id : "monitorEvent",  
  27.                  row :  4,  
  28.                  col :  6  
  29.         };  
  30.         table(monitorTable); //createTable  
  31.       };  
  32.     </script>  
  33.   </body>  
  34. <HTML>  

table.js

  1. function table(table){  
  2.    var _table={  
  3.            con : table.container,  
  4.           name : table.name,  
  5.             id : table.id,  
  6.            row : table.row,  
  7.            col : table.col,  
  8.     createElem : function(elem){  
  9.                    return document.createElement(elem);  
  10.                  },  
  11.      getElemId : function(id){  
  12.                    return document.getElementById(id);  
  13.                  }  
  14.    }  
  15.   // console.log(_table.createElem("table"));  
  16.    var Table=_table.createElem("table"),  
  17.        thead=_table.createElem("thead"),  
  18.        tbody=_table.createElem("tbody"),  
  19.        tableParent=_table.con;  
  20.      
  21.   
  22.    var trHead=_table.createElem("tr"); //thead  
  23.    //tr.appendChild(thead);  
  24.    for(var i=0;i<_table.col;i++){  
  25.      var th=_table.createElem("th");  
  26.      trHead.appendChild(th);  
  27.    }  
  28.    thead.appendChild(trHead);  
  29.   
  30.    for(var m=0;m<_table.row;m++){  
  31.      var tr=_table.createElem("tr");  
  32.      for(var n=0;n<_table.col;n++){  
  33.         var td=_table.createElem("td");  
  34.         tr.appendChild(td);  
  35.       }  
  36.      tbody.appendChild(tr);  
  37.   
  38.    }  
  39.   
  40.    Table.appendChild(thead);  
  41.    Table.appendChild(tbody);  
  42.    _table.getElemId("wrapper").appendChild(Table);  
  43.   

在操作html也可以用objTable.insertRow(rownum)完成对表格的添加。

 function tableAdd() {
			var objTable= document.getElementById("myTable");
			var newRow;
			var rownum = objTable.rows.length;
			newRow=objTable.insertRow(rownum);
			newRow.id="r"+rownum;
			newRow.align = "center";
			newRow.bgColor="#ffffff";
			i++;
			newRow.insertCell(0).innerHTML="<input type='hidden' name='filetypeid' value='' /><input type='text' name='filetype'  size='30'  οnkeypress='return checkStr(this,20)' οnchange='changeStr(this,20)'/>";
			newRow.insertCell(1).innerHTML="<input type='text' name='typeinfo' size='50' οnkeypress='return checkStr(this,100)' οnchange='changeStr(this,50)' />";
			newRow.insertCell(2).innerHTML="<input type='checkbox' name='select' value='o'>";
    }


©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页