利用js给mysql创建表_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");

functioninit(){

//获得body对象

varbodyObj = getBody();

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

varaddBtn = createAddBtn();

bodyObj.appendChild(addBtn);

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

vartableObj = createTable();

bodyObj.appendChild(tableObj);

}

functiongetBody(){

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

bodyObj.style.backgroundColor="#B7DBF5";

bodyObj.style.margin="0px";

bodyObj.style.padding="0px";

returnbodyObj;

}

functioncreateAddBtn(){

//动态创建一个按钮

varaddBtn = document.createElement("input");

addBtn.type="button";

addBtn.value="add";

addBtn.οnclick=function(){

vartbObj = document.getElementById("tbObjId");

tbObj.appendChild(createTr());

};

returnaddBtn;

}

functioncreateTable(){

vartableObj = document.createElement("table");

tableObj.className="tbl";

tableObj.cellSpacing="0";

tableObj.cellPadding="5";

vartbObj = createTbody();

tableObj.appendChild(tbObj);

returntableObj;

}

functioncreateTbody(){

vartbObj = document.createElement("tbody");

tbObj.id="tbObjId";

vartrObj = createHeaderTr();

tbObj.appendChild(trObj);

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

{

trObj = createTr();

tbObj.appendChild(trObj);

}

returntbObj;

}

functioncreateHeaderTr(){

vartrObj = document.createElement("tr");

trObj.bgColor="#eeccee";

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

vartdObj =createCkHeaderTd();

trObj.appendChild(tdObj);

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

{

tdObj = createPlainHeaderTd();

trObj.appendChild(tdObj);

}

tdObj = createHeaderTd();

trObj.appendChild(tdObj);

returntrObj;

}

functioncreatePlainHeaderTd(){

vartdObj = document.createElement("th");

tdObj.className="cell";

vartextObj = document.createTextNode("TITLE");

tdObj.appendChild(textObj);

returntdObj;

}

functioncreateHeaderTd(){

vartdObj = document.createElement("th");

tdObj.className="cell";

vartextObj = document.createTextNode("OPERATION");

tdObj.appendChild(textObj);

returntdObj;

}

functioncreateCkHeaderTd(){

vartdObj = document.createElement("td");

tdObj.className="cell";

varckBox = createCheckbox("ckAll");

tdObj.appendChild(ckBox);

returntdObj;

}

functioncreateTr(){

vartrObj = document.createElement("tr");

trObj.bgColor="white";

trObj.οnmοuseοver=function(){

this.bgColor="#B7DBF5";

};

trObj.οnmοuseοut=function(){

this.bgColor="white";

};

vartdObj =createCkTd();

trObj.appendChild(tdObj);

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

{

tdObj = createPlainTd();

trObj.appendChild(tdObj);

}

tdObj = createTd();

trObj.appendChild(tdObj);

returntrObj;

}

functioncreatePlainTd(){

vartdObj = document.createElement("td");

tdObj.className="cell";

vartextObj = document.createTextNode("hello");

tdObj.appendChild(textObj);

returntdObj;

}

functioncreateTd(){

vartdObj = document.createElement("td");

tdObj.className="cell";

vardelBtn = createDelBtn();

tdObj.appendChild(delBtn);

returntdObj;

}

functioncreateCkTd(){

vartdObj = document.createElement("td");

tdObj.className="cell";

varckBox = createCheckbox("item");

tdObj.appendChild(ckBox);

returntdObj;

}

functioncreateDelBtn(){

vardelBtn = document.createElement("input");

delBtn.type="button";

delBtn.value="delete";

delBtn.οnclick=function(){

vardelBtnPP =this.parentNode.parentNode;

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

delBtnPP.parentNode.removeChild(delBtnPP);

};

returndelBtn;

}

functioncreateCheckbox(name){

varckBox = document.createElement("input");

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

ckBox.id=name;

ckBox.type="checkbox";

if(name=="ckAll"){

ckBox.οnclick=function(){

varitems = document.getElementsByName("item");

//alert(items.length);

for(vari=0;i

{

items[i].checked =this.checked;

}

};

}

returnckBox;

}

3.dom.html