DOM（二）-10-(示例-删除表格的行和列)

来源：互联网发布：淘宝店铺不支持7天退货编辑：程序博客网时间：2024/06/03 20:51

表格样式table.css代码

@CHARSET "UTF-8";table{border:##249bdb 1px solid;width:500px;border-collapse:collapse;}table td{border:#249bdb 1px solid;padding:5px;/*td左边顶格*/}

主程序代码

<!--添加新功能：删除表格的行和列操作打开DHMTL API文档，找到里面的table对象，其内有方法：（1）deleteRow：从表格及 rows 集合中删除指定行(tr)。语法：object.deleteRow( [iRowIndex])传入角标，删除指定的行 【特别注意】角标是从0开始的，即表格第一行对应角标0，第二行对应1，第三行对应2……--><html><head><style type="text/css">@import url(table.css);</style></head><body><script type="text/javascript">function createTable(){var oTabNode = document.createElement("table");//设置表格名称，为了后续删除行和删除列function中先对表格是否存在进行判断oTabNode.setAttribute("id","tableid");//该方法类似oTabNode.id = "tableid";var rowVal = parseInt(document.getElementsByName("rownum")[0].value);var colVal = parseInt(document.getElementsByName("colnum")[0].value);for(var x=1;x<=rowVal;x++){var oTrNode = oTabNode.insertRow();for(var y=1;y<=colVal;y++){var oTdNode = oTrNode.insertCell();oTdNode.innerHTML = x + "--" + y;}}document.getElementsByTagName("div")[0].appendChild(oTabNode);document.getElementsByName("crtBut")[0].disabled = true;}//定义删除行事件处理办法function delRow(){//获取表格对象var oTabNode = document.getElementById("tableid");//先判断表格是否存在，如果不存在，还删除什么东西if(oTabNode == null){alert("表格不存在！");return;}//获取要删除的表格的行数var rowVal_del = parseInt(document.getElementsByName("delrow")[0].value);//删除指定的行，这里需要健壮性判断，即判断用户输入的要删除的行是否有效的，即若3行表格，输入的数字是否在1-3之间if(rowVal_del<=1 && rowVal_del<=oTabNode.rows.length){/* *oTabNode是当前被操作的表格节点，其有个属性叫做rows，即拿到所有行，然后lenght是一共有几行 */oTabNode.deleteRow(rowVal_del-1);/* *【切记】这里必须减1，符合用户习惯，因为deleteRow方法传入的角标是从0开始计数的。 *比如rowVal_del=3，那么3-1=2，所以deleteRow(2)，那么在实际操作中角标2对应的行是第三行，这样 *就实现了用户传入几就删除第几行。 */}else{alert("要删除的行不存在！");}}//定义删除列事件处理办法：【特别注意思想】删除列，其实就是删除每一行中同一位置的单元格，因为没有直接删除列的方法function delCol(){var oTabNode = document.getElementById("tableid");if(oTabNode == null){alert("表格不存在！");return;}//获取用户输入的数字（要删除的列）var colVal_del = parseInt(document.getElementsByName("delcol")[0].value);//删除列操作，既然是删除每行的同一位置的单元格，那么需要先遍历所有行，然后删除同一位置的单元格//【切记】健壮性判断（理由同上面的删除行function，详情查阅DHTML API文档）if(colVal_del>=1 && colVal_del<=oTabNode.rows[0].cells.length){//oTabNode是当前被操作的表格节点，rows[0]是拿到第一行，cells是拿到该行的所有单元格，length是该行单元格总数，即oTabNode的列数for(var x=0;x<oTabNode.rows.length;x++){//遍历所有行oTabNode.rows[x].deleteCell(colVal_del-1);//拿到第x行，删除该行指定单元格//调用deleteCell方法删除每行同一位置单元格，【注意】减1}}else{alert("要删除的列不存在！");}}</script>行数：<input type="text" name="rownum" /> 列数：<input type="text" name="colnum" /><input type="button" value="创建表格" name="crtBut" onclick="createTable()" /><hr/>删除第<input type="text" name="delrow" />行 <input type="button" value="删除行" onclick="delRow()" /><br/>删除第<input type="text" name="delcol" />列 <input type="button" value="删除列" onclick="delCol()" /><hr/><div></div></body></html>

0 0