js动态生成table【转】
lovehuayud 2012-02-22
<!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>
相关推荐
表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...