js动态创建表格,删除行列的实例代码。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Js动态创建表格、删除行例-www.jbxue.com</title> <link rel="stylesheet" href="tab.css" /> <script type="text/javascript" src="../Day26/doctool.js"></script> <script type="text/javascript"> function createTab1() { var tabNode = doc.createElement("table"); var tbdNode = doc.createElement("tbody"); var trNode = doc.createElement("tr"); var tdNode = doc.createElement("td"); var textNode = doc.createTextNode("单元格一"); tdNode.appendChild(textNode); trNode.appendChild(tdNode); tbdNode.appendChild(trNode); tabNode.appendChild(tbdNode); byTag("div")[0].appendChild(tabNode); } function createTab() { var tabNode = doc.createElement("table"); //tabNode.id = "tabid"; tabNode.setAttribute("id","tabid"); var row = byName("rownum")[0].value; var col = byName("colnum")[0].value; for(var x=1; x<=row; x++) { var trNode = tabNode.insertRow(); for(var y=1; y<=col; y++) { var tdNode = trNode.insertCell(); tdNode.innerHTML = x+"...."+y; } } byTag("div")[0].appendChild(tabNode); event.srcElement.disabled = true; } function delRow() { var tabNode = byId("tabid"); if(tabNode==null) { alert("表格不存在 "); return; } var rownum = byName("delrow")[0].value; if(rownum>0 && rownum<=tabNode.rows.length) tabNode.deleteRow(rownum-1); else { alert("删除的行不存在,学习数数很重要"); } } function delCol() { var tabNode = byId("tabid"); if(tabNode==null) { alert("表格不存在 "); return; } var colnum = byName("delcol")[0].value; if(colnum>0 && colnum<=tabNode.rows[0].cells.length) { for(var x=0;x<tabNode.rows.length; x++) { tabNode.rows[x].deleteCell(colnum-1); } } else { alert("删除的列不存在"); } } </script> </head> <body> <!-- 通过页面的按钮可以动态的创建一个表格。 --> 行:<input type="text" name="rownum" /><br /> 列:<input type="text" name="colnum" /><br /> <input type="button" value="创建表格" onclick="createTab()" /><br /> <input type="text" name="delrow" /> <input type="button" value="删除行" onclick="delRow()" /> <br /> <input type="text" name="delcol" /> <input type="button" value="删除列" onclick="delCol()" /> <br /> <br /> <div> </div> </body> </html>