js动态创建表格

我们利用JS操作DOM的能力，动态创建一张表格，可以动态增加行，删除行，复选框有全选的功能！有以下3个文件：<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />

1.     dom.css

.tbl {

   font-size: 12px;

   border: 1px solid #ebebee;

}

 

.cell {

   font-size: 12px;

   border-bottom: 1px solid #ebebee;

   width: 120px;

   text-align: center;

}

 

2.     dom.js

//页面加载后调用init函数

window.onload = init;

//动态给文档创建CSS样式

document.createStyleSheet("dom.css");

function init(){

//获得body对象

var bodyObj = getBody();

//将按钮对象附加到body上作为body的子对象

var addBtn = createAddBtn();

bodyObj.appendChild(addBtn);

//将表格对象附加到body上作为body的子对象

var tableObj = createTable();

bodyObj.appendChild(tableObj);

}

 

function getBody(){

var bodyObj = document.getElementsByTagName("body")[0];

bodyObj.style.backgroundColor="#B7DBF5";

bodyObj.style.margin="0px";

bodyObj.style.padding="0px";

return bodyObj;

}

 

function createAddBtn(){

//动态创建一个按钮

var addBtn = document.createElement("input");

addBtn.type="button";

addBtn.value="add";

addBtn.onclick=function(){

var tbObj = document.getElementById("tbObjId");

tbObj.appendChild(createTr());

};

return addBtn; 

}

 

 

function createTable(){

var tableObj = document.createElement("table");

tableObj.className="tbl";

tableObj.cellSpacing="0";

tableObj.cellPadding="5";

var tbObj = createTbody();

tableObj.appendChild(tbObj);

return tableObj;

}

 

 

function createTbody(){

var tbObj = document.createElement("tbody");

tbObj.id="tbObjId";

var trObj = createHeaderTr();

tbObj.appendChild(trObj);

for(var i=0;i<5;i++)

{

   trObj = createTr();

   tbObj.appendChild(trObj);

}

return tbObj;  

}

 

function createHeaderTr(){

var trObj = document.createElement("tr");

trObj.bgColor="#eeccee";

trObj.title="这是表头!";

   var tdObj =createCkHeaderTd();

   trObj.appendChild(tdObj);

   for(var j=0;j<4;j++)

   {

   tdObj = createPlainHeaderTd();

   trObj.appendChild(tdObj);

   }

   tdObj = createHeaderTd();

   trObj.appendChild(tdObj);

return trObj;

}

 

function createPlainHeaderTd(){

var tdObj = document.createElement("th");

   tdObj.className="cell";

   var textObj = document.createTextNode("TITLE");

   tdObj.appendChild(textObj);

return tdObj;

}

function createHeaderTd(){

var tdObj = document.createElement("th");

   tdObj.className="cell";

   var textObj = document.createTextNode("OPERATION");

   tdObj.appendChild(textObj);

return tdObj;

}

 

function createCkHeaderTd(){

var tdObj = document.createElement("td");

   tdObj.className="cell";

   var ckBox = createCheckbox("ckAll");

   tdObj.appendChild(ckBox);

return tdObj;

}

 

function createTr(){

var trObj = document.createElement("tr");

trObj.bgColor="white";

   trObj.onmouseover=function(){

   this.bgColor="#B7DBF5";

};

trObj.onmouseout=function(){

   this.bgColor="white";

};

   var tdObj =createCkTd();

   trObj.appendChild(tdObj);

   for(var j=0;j<4;j++)

   {

   tdObj = createPlainTd();

   trObj.appendChild(tdObj);

   }

   tdObj = createTd();

   trObj.appendChild(tdObj);

return trObj;

}

 

function createPlainTd(){

var tdObj = document.createElement("td");

   tdObj.className="cell";

   var textObj = document.createTextNode("hello");

   tdObj.appendChild(textObj);

return tdObj;

}

function createTd(){

var tdObj = document.createElement("td");

   tdObj.className="cell";

   var delBtn = createDelBtn();

   tdObj.appendChild(delBtn);

return tdObj;

}

 

function createCkTd(){

var tdObj = document.createElement("td");

   tdObj.className="cell";

   var ckBox = createCheckbox("item");

   tdObj.appendChild(ckBox);

return tdObj;

}

 

 

function createDelBtn(){

var delBtn = document.createElement("input");

   delBtn.type="button";

   delBtn.value="delete";

   delBtn.onclick=function(){

   var delBtnPP = this.parentNode.parentNode;

   //delBtnPP.parentNode.deleteRow(delBtnPP.rowIndex); 

   delBtnPP.parentNode.removeChild(delBtnPP);

};

return delBtn; 

}

 

function createCheckbox(name){

var ckBox = document.createElement("input");

//ckBox.name= name;IE6下name属性只读

ckBox.id=name;

ckBox.type="checkbox";

if(name=="ckAll"){

ckBox.onclick=function(){

var items = document.getElementsByName("item");

//alert(items.length);

for(var i=0;i<items.length;i++)

{

   items[i].checked = this.checked;

}

};

}

return ckBox;

}

 

3.     dom.html

<script src="dom.js"></script>