使表格单元格在单击时可编辑

时间:2014-08-12 07:42:08

标签: javascript php

我正在尝试创建一个从数据库中获取数据的表。现在我真正想要做的是,当用户点击任何一行的单元格时,单元格中的数据应该是可编辑的。我无法弄清楚如何做到这一点,也是有任何方式当用户完成编辑然后我可以保存我的数据库中的更改。任何建议都非常感谢

1 个答案:

答案 0 :(得分:1)

这是一个简单的方法,开始使用JQuery和简单的HTML。为您提供一个良好的起点

<强> 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');
    });    
});

我为你做了一个小提琴。 DEMO