html table+css实现可编辑表格

要实现可编辑的 HTML 表格，你可以使用 JavaScript 和 HTML5 的 contenteditable 属性。

    


    

        

            

                
Name
                
Age
                
Gender
            
        
        

            

                
John Doe
                
25
                
Male
            
            

                
Jane Smith
                
30
                
Female
            
            
        
    

    

在上述示例中，使用了 contenteditable 属性来使表格单元格可编辑。添加 contenteditable="true" 属性的单元格可以被鼠标点击并接受用户输入。

JavaScript 部分遍历表格的所有单元格，并为每个单元格添加输入事件侦听器。在输入事件处理程序中，你可以根据需要处理用户的输入，比如更新数据或触发其他操作。

点击表格前：

点击表格后：