js动态生成table【转】

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312">

<title>js操作表格</title>

<scriptlanguage="javascript">

/*生成表格,采用appendChild*/

functioninit(){

_table=document.getElementById("table");

_table.border="1px";

_table.width="800px";

for(vari=1;i<10;i++){

varrow=document.createElement("tr");

row.id=i;

for(varj=1;j<6;j++){

varcell=document.createElement("td");

cell.id=i+"/"+j;

cell.appendChild(document.createTextNode("第"+cell.id+"列"));

row.appendChild(cell);

}

document.getElementById("newbody").appendChild(row);

}

}

functionrebulid(){

varbeginRow=document.getElementById("beginRow").value;/*开始行*/

varendRow=document.getElementById("endRow").value;/*结束行*/

varbeginCol=document.getElementById("beginCol").value;/*开始列*/

varendCol=document.getElementById("endCol").value;/*结束列*/

vartempCol=beginRow+"/"+beginCol;/*定位要改变属性的列*/

alert(tempCol);

vartd=document.getElementById(tempCol);

/*删除要合并的单元格*/

for(varx=beginRow;x<=endRow;x++){

for(vari=beginCol;i<=endCol;i++){

if(x==beginRow){

document.getElementById("table").rows[x].deleteCell(i+1);

}

else{

document.getElementById("table").rows[x].deleteCell(i);

}

}

}

td.rowSpan=(endRow-beginRow)+1;

}

/*添加行,使用appendChild方法*/

functionaddRow(){

varlength=document.getElementById("table").rows.length;

/*document.getElementById("newbody").insertRow(length);

document.getElementById(length+1).setAttribute("id",length+2);*/

vartr=document.createElement("tr");

tr.id=length+1;

vartd=document.createElement("td");

for(i=1;i<4;i++){

td.id=tr.id+"/"+i;

td.appendChild(document.createTextNode("第"+td.id+"列"));

tr.appendChild(td);

}

document.getElementById("newbody").appendChild(tr);

}

functionaddRow_withInsert(){

varrow=document.getElementById("table").insertRow(document.getElementById("table").rows.length);

varrowCount=document.getElementById("table").rows.length;

varcountCell=document.getElementById("table").rows.item(0).cells.length;

for(vari=0;i<countCell;i++){

varcell=row.insertCell(i);

cell.innerHTML="新"+(rowCount)+"/"+(i+1)+"列";

cell.id=(rowCount)+"/"+(i+1);

}

}

/*删除行,采用deleteRow(rowIndex)*/

functionremoveRow(){

/*varrow=document.getElementById("2");

varindex=row.rowIndex;

alert(index);*/

document.getElementById("newbody").deleteRow(document.getElementById(document.getElementById("table").rows.length).rowIndex);

}

/*添加列,采用insertCell(列位置)方法*/

functionaddCell(){

/*document.getElementById("table").rows.item(0).cells.length

用来获得表格的列数

*/

for(vari=0;i<document.getElementById("table").rows.length;i++){

varcell=document.getElementById("table").rows[i].insertCell(2);

cell.innerHTML="第"+(i+1)+"/"+3+"列";

}

}

/*删除列,采用deleteCell(列位置)的方法*/

functionremoveCell(){

for(vari=0;i<document.getElementById("table").rows.length;i++){

document.getElementById("table").rows[i].deleteCell(0);

}

}

</script>

</head>

<body onLoad="init();">

<table id="table" align="center"> 

<tbodyid="newbody"></tbody>

</table>

<div>

<tablewidth="800px"border="1px"align="center">

<tr><tdalign="center"><inputtype="button"id="addRow"name="addRow"onClick="addRow();"value="添加行"/></td><tdalign="center"><inputtype="button"id="delRow"name="delRow"onClick="removeRow();"value="删除行"/></td></tr>

<tr><tdalign="center"><inputtype="button"id="delCell" name="delCell"onClick="removeCell();"value="删除列"/></td><tdalign="center"><inputtype="button" id="addCell"name="addCell"onClick="addCell();"value="添加列"/></td></tr>

 <tr><tdalign="center"colspan="2"><inputtype="button"id="addRows" name="addRows"onClick="addRow_withInsert();"value="添加行"/></td></tr>

</table>

</div>

<div>

<tablewidth="800px"border="1px"align="center">

<tr><td>从第<inputtype="text"id="beginRow"name="beginRow"value=""/>行到<inputtype="text"name="endRow"id="endRow"value=""/>行</td><tdrowspan="2"id="test"><inputtype="button"name="hebing"id="hebing"value="合并"onClick="rebulid();"/></td></tr>

<tr><td>从第<inputtype="text"name="beginCol"id="beginCol"value=""/>列到<inputtype="text"name="endCol"id="endCol"value=""/>列</td></tr>

</table>

</div>

</body>

</html>

相关推荐