Javascript动态创建表格及删除行列的方法
本文实例讲述了Javascript动态创建表格及删除行列的方法。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>动态创建表格(还能删除行列)</title>
<styletype="text/css">
body,div
{
margin:0;
padding:0;
font-size:14px;
}
table
{
margin:0auto;
}
td
{
border:1pxsolidgreen;
text-align:center;
}
</style>
<scripttype="text/javascript">
//动态创建表格
functioncreateTable(){
vardivMain=document.getElementById("divMain");
removeAllChild(divMain);//删除上次添加的表格
varmyTable=document.createElement("table");
myTable.id="DynamicTable";
varmyRow=document.getElementById("myRow").value;
varmyCol=document.getElementById("myCol").value;
vartrNode;
vartdNode;
varstrTmp;
for(vari=1;i<=myRow;i++){
trNode=myTable.insertRow(-1);
for(varj=1;j<=myCol;j++){
strTmp="第"+i+"行,第"+j+"列";
tdNode=trNode.insertCell(-1);
tdNode.innerHTML="<ahref='javascript:void(0);'>"+strTmp+"</a>";
}
}
divMain.appendChild(myTable);//把表格添加到div中
//event.srcElement.disabled="true";//添加按钮禁用
}
//删除指定节点下的所有子节点
functionremoveAllChild(nodeObj){
while(nodeObj.hasChildNodes()){
nodeObj.removeChild(nodeObj.firstChild);
}
}
//删除行
functionDeleteRow(){
varrowNum=document.getElementById("delRow").value;
vartbl=document.getElementById("DynamicTable");
if(tbl==null){
alert('请先创建表格');
return;
}
if((rowNum<=tbl.rows.length)&&(rowNum>0)){
tbl.deleteRow(rowNum-1);
}
else{
alert('请输入一个有效的行!');
}
}
//删除列
functionDeleteCol(){
varcolNum=document.getElementById("delCol").value;
vartbl=document.getElementById("DynamicTable");
if(tbl==null){
alert('请先创建表格');
return;
}
if(tbl.rows.length<=0){
alert('表格不存在行');
return;
}
if((colNum<=tbl.rows[0].cells.length)&&(colNum>0)){
for(vari=0;i<tbl.rows.length;i++){
tbl.rows[i].deleteCell(colNum-1);
}
}
else{
alert('指定列不存在');
}
}
</script>
</head>
<body>
请输入行数<inputtype="text"id="myRow"/>,请输入列数
<inputtype="text"id="myCol"/><br/>
<inputtype="button"value="创建表格"onclick="createTable()"/><br/>
<inputtype="text"id="delRow"/><inputtype="button"value="删除行"
onclick="DeleteRow()"/><br/>
<inputtype="text"id="delCol"/><inputtype="button"value="删除列"
onclick="DeleteCol()"/><br/>
<divid="divMain">
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。