PHP+Ajax+Mysql+jeditable无刷新编辑表格源码实例

本文通过editable插件实现单击将一个文本信息变为可编辑的表单，你可以对文本内容进行编辑，然后点击“确定”保存到数据库；当点击“取消”按钮，则页面恢复到初始状态

jeditable优势

实时编辑，后台实时响应，并即时完成局部刷新。

可自定义输入表单类型，目前jeditable提供text,select,textarea类型。

响应键盘的回车和ESC键。

插件机制，本例提供与jquery ui的datepicker日历控件的整合。

接着我们用PHP举个示例表单：

这是一个用户信息的表格，从代码中可以发现响应的字段信息的td都给了一个class和id属性，并赋值。值得一提的是表格中的td对应的id的值是和数据库中的字段名称一一对应的，这样做就是为了在编辑时让后台获取相应的字段信息，后面的PHP代码中会讲到。

<table width="100%" border="0" cellspacing="0" cellpadding="0">
    <thead>
        <tr class="table_title">
            <td colspan="4"><span class="open"></span>客户信息</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td width="20%" class="table_label">姓名</td>
            <td width="30%" class="edit" id="username"><?php echo $username; ?></td>
            <td width="20%" class="table_label">办公电话</td>
            <td width="30%" class="edit" id="phone"><?php echo $phone; ?></td>
        </tr>
        <tr>
            <td class="table_label">称谓</td>
            <td class="edit" id="solutation"><?php echo $solutation; ?></td>
            <td class="table_label">手机</td>
            <td class="edit" id="mobile"><?php echo $mobile; ?></td>
        </tr>
        <tr>
            <td class="table_label">公司名称</td>
            <td class="edit" id="company"><?php echo $company; ?></td>
            <td class="table_label">电子邮箱</td>
            <td class="edit" id="email"><?php echo $email; ?></td>
        </tr>
        <tr>
            <td class="table_label">潜在客户来源</td>
            <td class="edit_select" id="source"><?php echo $source; ?></td>
            <td class="table_label">有限期</td>
            <td class="datepicker" id="sdate"><?php echo $sdate; ?></td>
        </tr>
        <tr>
            <td class="table_label">职位</td>
            <td class="edit" id="job"><?php echo $job; ?></td>
            <td class="table_label">网站</td>
            <td class="edit" id="web"><?php echo $web; ?></td>
        </tr>
        <tr>
            <td class="table_label">创建时间</td>
            <td><?php echo $createtime; ?></td>
            <td class="table_label">修改时间</td>
            <td id="modifiedtime"><?php echo $modifiedtime; ?></td>
        </tr>
        <tr>
            <td class="table_label">备注</td>
            <td class="textarea" id="note" colspan="3"><?php echo $note; ?></td>
        </tr>
    </tbody>
</table>