【实例名称】
删除表格指定行
【实例描述】
论坛中允许管理员删除一些不需要的主题,这时可以使用本例提供的删除指定行功能。删除行后,下面的行自动上移。
【实例代码】
<html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>标题页-本站(www.xue51.com)</title> <script LANGUAGE="JavaScript"> function deleteRow (tableID, rowIndex) { var table =document.all[tableID] //获得当前表格 table.deleteRow(rowIndex); //通过行索引删除行 } </script> </head> <body> <table id=mytable border=1><tr> <td>第1行</td><td onclick="deleteRow ('mytable',this.parentElement.rowIndex)">删除当前行</td> </tr><tr><td>第2行</td><td onclick="deleteRow ('mytable',this.parentElement.rowIndex)">删除当前行</td> </tr><tr><td>第3行</td><td onclick="deleteRow ('mytable',this.parentElement.rowIndex)">删除当前行</td> </tr><tr><td>第4行</td><td onclick="deleteRow ('mytable',this.parentElement.rowIndex)">删除当前行</td> </tr></table> </body> </html>
【运行效果】
页面初始运行效果
删除第二行后的效果
【难点剖析】
本例的难点是获取表格中某行的行号,以及删除表格行的方法。如果不将行号传给方法,在运行中是很难获取行号的,所以本例将行号作为参数传递给“deleteRow”方法。删除表格使用了表格对象自带的“deleteRow”方法,此方法的参数是要删除的行的行号。
【源码下载】
如果你不愿复制代码及提高代码准确性,你可以点击:删除表格指定行 进行本实例源码下载
……