【javascript】table对象操作，动态创建，删除指定行列

来源：互联网发布：linux超级用户编辑：程序博客网时间：2024/06/07 00:09
<script type="text/javascript">function createTab(){ //动态创建表格var tabNode = document.createElement("table");tabNode.setAttribute("id","tabID");var rowNum = document.getElementsByName("rowNum")[0].value; //取文本框的值var colNum = document.getElementsByName("colNum")[0].value;for(var x=1;x<=rowNum;x++){var trNode = tabNode.insertRow(); //调用table 对象方法插入一行 for(var y=1;y<=colNum;y++){var tdNode = trNode.insertCell();tdNode.innerHTML = x+"...."+ y ;  //添加的是HTML文本 }}document.getElementsByTagName("div")[0].appendChild(tabNode);event.srcElement.disabled = true ; //关闭触发事件}function delrow(){  //删除指定行var tabNode = document.getElementById("tabID");if(tabNode==null){alert("不存在"); return ;}var rowNum = document.getElementsByName("delrow")[0].value;if(rowNum>0 && rowNum<=tabNode.rows.length)tabNode.deleteRow(rowNum-1);elsealert("行不存在");}function delcol(){  //删除指定列var tabNode = document.getElementById("tabID");if(tabNode==null){alert("不存在"); return ;}var colNum = document.getElementsByName("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); }}elsealert("列不存在");}</script><style type="text/css"> table{ border: #0066FF 1px solid ; width:60%;}table th{ border:#003399 1px solid ; background-color: #0099FF;}table td{border:#0099FF 1px solid ;}</style></head><body>行：<input type="text" name="rowNum"/>列： <input type="text" name="colNum" /><input type="button" value="创建表格" onclick="createTab()"/><br/><input type="text" name="delrow" /><input type="button" value="删除行" onclick="delrow()" /><input type="text" name="delcol" /><input type="button" value="删除列" onclick="delcol()" /><div></div>  <%--指定表格添加的位置 --%></body>