html table可编辑表格数据实现删除

这里教大家使用纯html和js脚本结合实现删除表格数据




    


    
Name Age Gender Action
John Doe 25 Male
Jane Smith 30 Female

代码解释:

在上述示例中,每行的最后一列添加了一个按钮,并为按钮绑定了一个 onclick 事件,调用 deleteRow 函数。

JavaScript 部分的 deleteRow 函数接受按钮作为参数,在函数内部首先获取按钮的父节点,即所在的  元素,然后再获取  的父节点,即所在的行  元素,最后获取行元素的父节点,即所在的表格 

 元素。

最后,调用 deleteRow 方法,将行的索引作为参数,从表格中删除该行。

这样,当用户点击某一行的“Delete”按钮时,相应的行将被删除。在实际项目中,可能需要进一步确认用户是否要删除该行,以及处理删除后的数据更新。

效果演示:

删除前:

点击按钮删除后:

你可能感兴趣的:(html,前端,javascript)