本文介绍如何使用JavaScript实现HTML表格的动态行添加与删除功能,并支持双击单元格进入编辑模式。通过操作DOM元素,用户可以实时插入新行、移除现有行,并对单元格内容进行修改,适用于需要灵活数据录入的Web场景。
JavaScript实现表格行动态添加删除与双击编辑
<!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> <title>js添加删除行和双击变文本框---阿会楠练习作品</title> <style type="text/css"> *{ font-size:12px; } #myTable{ background:#D5D5D5; color:#333333; } #myTable tr{ background:#F7F7F7; } #myTable tr th{ height:20px; padding:5px; } #myTable tr td{ padding:5px; } </style> </head> <body> <input type="button" onclick="addRow()" value="插入一行" /> <table id="myTable" border="0" cellpadding="0" cellspacing="1"> <tr><th>编号</th><th>姓名</th><th>操作</th></tr> </table> </body> </html> 注意:若需引入外部JavaScript文件,必须刷新页面后代码方可执行。