jsday07(页面通过按钮打开其他页面 创建删除表格行列)

xiaoxiao2021-02-28  168

<title>无标题文档</title> <script type="text/javascript"> function opendemo(page) { window.open(page,"_blank",""); } </script> <style type="text/css"> table ,table th{ border:#00F 1px solid; width:600px; } table th { padding:10px; } </style> </head> <body> <table> <tr> <th> <input type="button" value="演示展开闭合效果" onclick="opendemo('js-1.html')" /> </th> <th> <input type="button" value="" onclick="opendemo()" /> </th> <th> <input type="button" value="" onclick="opendemo()" /> </th> </tr> <tr> <th> <input type="button" value="" onclick="opendemo()" /> </th> <th> <input type="button" value="" onclick="opendemo()" /> </th> <th> <input type="button" value="" onclick="opendemo()" /> </th> </tr> <tr> <th> <input type="button" value="" onclick="opendemo()" /> </th> <th> <input type="button" value="" onclick="opendemo()" /> </th> <th> <input type="button" value="" onclick="opendemo()" /> </th> </tr> </table> </body>

之前并没有直接删除列的方法 要通过删除每一行中的元素(单元格)cell来完成

<script type="text/javascript" src="doctool.js"> </script> <link rel="stylesheet" href="css-05.css" /> <script type="text/javascript"> function creatTab() { var tabNode= doc.createElement("table"); var tbdNode = doc.createElement("tboday"); //alert(tbdNode.nodeName); var trNode= doc.createElement("tr"); var tdNode = doc.createElement("td"); var textNode = doc.createElement("单元格一"); tdNode.appendChild(textNode); trNode.appendChild(tdNode); tbdNode.appendChild(trNode); tabNode.appendChild(tbdNode); byTag("div")[0].appendChild(tabNode); } function createTab2() { 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; } } //alert(tdNode.nodeName); //tdNode.innerHTML="单元格一".fontcolor("red");//表示添加的是html文本 用text标签不会被解析 //tdNode.innerHTML="<input type='button' value='hehe'/>"; 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="creatTab()" /><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/> <input type="button" value="创建表格2" onclick="createTab2()" /> <div> </div> </body>

doctool

// JavaScript Document var doc = document; function byId(id) { return doc.getElementById(id); } function byTag(tag) { return doc.getElementsByTagName(tag); } function byName(name) { return doc.getElementsByName(name); }
转载请注明原文地址: https://www.6miu.com/read-18894.html

最新回复(0)