<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">李小三</td> 
  <td width="20%" class="table_label">办公电话</td> 
  <td width="30%" class="edit" id="phone">021-12345678</td> 
 </tr> 
 <tr> 
  <td class="table_label">称谓</td> 
  <td class="edit" id="solutation">先生</td> 
  <td class="table_label">手机</td> 
  <td class="edit" id="mobile">13800138000</td> 
 </tr> 
 <tr> 
  <td class="table_label">公司名称</td> 
  <td class="edit" id="company">常丰集团</td> 
  <td class="table_label">电子邮箱</td> 
  <td class="edit" id="email">lrfbeyond@163.com</td> 
 </tr> 
 <tr> 
  <td class="table_label">潜在客户来源</td> 
  <td class="edit_select" id="source">公共关系</td> 
  <td class="table_label">有限期</td> 
  <td class="datepicker" id="sdate">2011-11-30</td> 
 </tr> 
 <tr> 
  <td class="table_label">职位</td> 
  <td class="edit" id="job">部门经理</td> 
  <td class="table_label">网站</td> 
  <td class="edit" id="web">www.helloweba.com</td> 
 </tr> 
 <tr> 
  <td class="table_label">创建时间</td> 
  <td>2010-11-04 21:11:59</td> 
  <td class="table_label">修改时间</td> 
  <td id="modifiedtime">2010-11-05 09:42:52</td> 
 </tr> 
 <tr> 
  <td class="table_label">备注</td> 
  <td class="textarea" id="note" colspan="3">备注信息</td> 
 </tr> 
 </tbody> 
</table> 

table{width:96%; margin:20px auto; border-collapse:collapse;} 
table td{line-height:26px; padding:2px; padding-left:8px; border:1px solid #b6d6e6;} 
.table_title{height:26px; line-height:26px; background:url(btn_bg.gif) repeat-x bottom; 
 font-weight:bold; text-indent:.3em; outline:0;} 
.table_label{background:#e8f5fe; text-align:right; } 

<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery.js">

然后开始调用插件。


$(function(){ 
  $('.edit').editable('save.php', { 
   width  :120, 
   height :18, 
   //onblur : 'ignore', 
   cancel : '取消', 
   submit : '确定', 
   indicator : '<img src="/UploadFiles/2021-04-02/loader.gif">

插件提供了很多属性和方法的调用。可以设置宽度，高度，按钮的文本信息，提交时的加载图片，鼠标滑上的提示信息等等。save.php是编辑后的信息最终提交的后台程序的地址。现在看看是不是表格中的信息可以编辑了哦。

jeditable还提供了select，textarea类型的编辑，并提供插件api接口。

来看下拉选择框select的处理：




$('.edit_select').editable('save.php', { 
 loadurl : 'json.php', 
 type  : "select", 
}); 



type指定的是select类型，select里加载的数据来自json.php，json.php提供了下拉框所需的数据源。


$array['老客户'] = '老客户'; 
$array['独自开发'] = '独自开发'; 
$array['合作伙伴'] = '合作伙伴'; 
$array['公共关系'] = '公共关系'; 
$array['展览会'] = '展览会'; 
print json_encode($array); 



这些数据是直接存在json.php文件里的，当然你也可以通过读取数据库信息，然后生成json数据，关于如何生成json数据，请查看。还有一种方法是直接在editable中指定data：


$('.edit_select').editable('save.php', { 
 data : " {'老客户':'老客户','独自开发':'独自开发','合作伙伴':'合作伙伴', '展览会':'展览会'}", 
 type : "select", 
}); 



不难发现，其实上述代码中的data就是一串json数据。

textarea类型就不再多数，将type类型改为textarea就可以了。PS：默认类型为text。

当处理日期类型时，我接入了一个jquery ui的日历插件，当然别忘了要引入juqery ui插件和样式：




<link rel="stylesheet" type="text/css" href="css/jquery-ui.css" /> 
<script type="text/javascript" src="/UploadFiles/2021-04-02/jquery-ui.js">

接入jquery ui的datepicker日历插件


$.editable.addInputType('datepicker', { 
 element : function(settings, original) { 
  var input = $('<input class="input" />'); 
  input.attr("readonly","readonly"); 
  $(this).append(input); 
  return(input); 
 }, 
 plugin : function(settings, original) { 
  var form = this; 
  $("input",this).datepicker(); 
 } 
}); 



调用的代码直接指定type类型为datepicker即可。


$(".datepicker").editable('save.php', { 
 width  : 120, 
 type  : 'datepicker', 
 onblur : "ignore", 
}); 



现在看看，表格中的“有限期”字段的日期是不是可以修改了。好了，还有其他更多的插件接入期待您的加入。

PHP

编辑好的字段信息会发送到后台程序save.php程序处理。save.php需要完成的工作是：接收前端提交过来的字段信息数据，并进行必要的过滤和验证，然后更新数据表中相应的字段内容，并返回结果。




include_once("connect.php"); //连接数据库 
$field=$_POST['id']; //获取前端提交的字段名 
$val=$_POST['value']; //获取前端提交的字段对应的内容 
$val = htmlspecialchars($val, ENT_QUOTES); //过滤处理内容 
 
$time=date("Y-m-d H:i:s"); //获取系统当前时间 
if(emptyempty($val)){ 
 echo "不能为空"; 
}else{ 
 //更新字段信息 
 $query=mysql_query("update customer set $field='$val',modifiedtime='$time' where id=1"); 
 if($query){ 
  echo $val; 
 }else{ 
  echo "数据出错"; 
 } 
} 



再回到开始的HTML代码，表格中显示的字段内容信息当然是从数据库读取来的，所以要用PHP读取数据表，把内容显示出来就OK，详细过程大家自己写一个吧。

如此，可编辑的表格就此收工。但是还不能完工，关于对输入信息的有效性的验证问题后面的文章我会陆续附上，敬请关注。
希望小编整理的每一篇文章都对大家有所帮助。

                                
                                

                                    jQuery编辑表格内容,jquery表格新增,jquery请填写此字段