使表格单元格可编辑单击

Making table cells editable on click

本文关键字：编辑 单击 单元格 表格      更新时间：2023-09-26

我正试图使一个表从数据库中获取其数据。现在我真正想做的是，当用户单击任何一行的单元格时，单元格中的数据应该是可编辑的。我无法弄清楚如何做到这一点，也有任何方法当用户完成编辑时，我可以保存我的数据库中的更改。如有任何建议，不胜感谢

这是一个使用JQuery和简单HTML开始的简单方法。给你一个好的起点

<table border="1">
    <tr>
        <td>
            <input type="text"/>
        </td>
        <td>
            <input type="text"/>
        </td>
    </tr>
</table>
CSS

input{
    display:none;
    height:100%;
}
table{
    height:100px;
    width:300px;    
}
table td{
    width:50%;   
    height:100%;
}
JQuery

$(document).ready(function(){
    $('table tr td').on('click', function(){
        $('input[type="text"]',this).css('display','block');
    });    
});
我为你做了一把小提琴。演示

相关文章：