附demo源码下载亚洲城ca88唯一官方网站,jQuery完毕

时间:2019-06-12 23:08来源:亚洲城ca88唯一官方网站
实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容。该代码解析和加载功能都用前端js实现,简

实现效果如下,在编辑表格的同时可以实现字段json内容的自动变化,点击提交可以保存到后台,页面加载的时候自动解析json并加载表格内容。该代码解析和加载功能都用前端js实现,简化了后台代码逻辑。

本例适用场景:当查看详细资料,如用户详情信息,发现其中某几个字段信息需要修改,可直接点击该字段内容进行修改,节约了用户时间,(传统的做法是进入一个编辑页面,列出所有编辑的字段信息,即使你只需要编辑其中一两个字段内容,然后点击提交)提高了WEB响应速度,从而提高了前端用户体验。

本文实例讲述了jQuery实现可以编辑的表格。分享给大家供大家参考,具体如下:

亚洲城ca88唯一官方网站 1

亚洲城ca88唯一官方网站 2

今天小编主要给大家讲解一下,如何利用jQuery js css实现表格的编辑。接下来,小编就简单总结一下如何实现这个小例子。

定义要操作的表格头:

本例依赖jquery库,并基于插件,具有以下特点:
实时编辑,后台实时响应,并即时完成局部刷新。
可自定义输入表单类型,目前jeditable提供text,select,textarea类型。
响应键盘的回车和ESC键。
插件机制,本例提供与jquery ui的datepicker日历控件的整合。
下面我们来一步步讲解实现过程。
XHTML 我们需要制作一个表格,如下:

第一步:编写html代码,代码如下所示:

<input readonly="readonly" class="form-control" type="text" id="scorerange" value="" name="scorerange"/> 
                      <table id="mytable"> 
                          <tr> 
                            <th style="width: 20%;">分数区间</th><th style="width:20%;">等级</th><th style="width:60%;">建议内容</th><th></th> 
                       </tr> 
                         <!--                         <tr><td><input onblur="caljson()" type="text" style="width: 50px;" >-<input type="text" style="width: 50px;" /></td> 
                          <td><input onblur="caljson()" type="text" style="width: 100%;" ></td> 
                          <td><input onblur="caljson()" id="btn1" type="button" onclick="$(this).parent().parent().remove()" value="删除" /></td></tr>                        -->                       </table> 
<table width="100%" border="0" cellspacing="0" cellpadding="0"> 
 <thead> 
  <tr class="table_title"> 
   <td colspan="4">客户信息</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> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
  <head>
    <title>JQuery实例2:可以编辑的表格</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/editTable.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/editTable.js"></script>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th colspan="2">鼠标点击表格项就可以编辑</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th>学号</th>
          <th>姓名</th>
        </tr>
        <tr>
          <td>000001</td>
          <td>张三</td>
        </tr>
        <tr>
          <td>000002</td>
          <td>李四</td>
        </tr>
        <tr>
          <td>000003</td>
          <td>王五</td>
        </tr>
        <tr>
          <td>000004</td>
          <td>赵六</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>

定义操作代码

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

分析一下上面的代码,我们很容易看出来table中可以包含thead和tbody,表头的内容可以放到th中,我们来运行一下,看看我们的效果:

function insertRowLast(newrow,s1,s2,s3,s4) { 
  if(newrow){ 
    var newRow = "<tr><td><input onblur="caljson()" value="0" type="text" style="width: 50px;" >-<input value="0" type="text" style="width: 50px;" /></td>"; 
    newRow ="<td><input  onblur="caljson()"  type="text" style="width: 50px;" ></td>"; 
    newRow ="<td><input maxlength="24" onblur="caljson()"  type="text" style="width: 100%;" ></td>"; 
    newRow ="<td><input  onblur="caljson()"  id="btn1" type="button" onclick="$(this).parent().parent().remove();caljson();" value="删除" /></td></tr>"; 
    $("#mytable tr:last").after(newRow); 
  }else{ 
    var newRow = "<tr><td><input value="" s1 "" onblur="caljson()" type="text" style="width: 50px;" >-<input value="" s2 "" type="text" style="width: 50px;" /></td>"; 
    newRow ="<td><input value="" s4 ""  onblur="caljson()"  type="text" style="width: 50px;" ></td>"; 
    newRow ="<td><input maxlength="24" value="" s3 ""  onblur="caljson()"  type="text" style="width: 100%;" ></td>"; 
    newRow ="<td><input  onblur="caljson()"  id="btn1" type="button" onclick="$(this).parent().parent().remove();caljson();" value="删除" /></td></tr>"; 
    $("#mytable tr:last").after(newRow); 
  } 
  caljson(); 
} 
var json=""; 
function caljson(){ 
 json="{"scorerange":["; 
 var idx = 0;  
 var idxlen = $("#mytable").find("tr").length; 
 $("#mytable").find("tr").each(function () { 
  if(idx==0){ 
  idx  ; 
    return; 
  } 
  var tdArr = $(this).children(); 
  var v1 = tdArr.eq(0).find('input').eq(0).val(); 
  var v2 = tdArr.eq(0).find('input').eq(1).val(); 
  var v3 = tdArr.eq(2).find('input').val(); 
  var v4 = tdArr.eq(1).find('input').val(); 
  json ="{"s1":"" v1 "","s2":"" v2 "","content":"" v3 "","classg":"" v4 ""}"; 
  idx  ; 
  if(idx!=idxlen){ 
  json =","; 
  } 
}); 
json ="]}"; 
$("#scorerange").val(json); 
//alert($("#scorerange").val()); 
} 
//alert(1); 
//alert($("#scorerange").val()); 
var dataObj=eval("($!{tbscence.scorerange})"); 
if(dataObj && dataObj.scorerange){ 
 //alert(dataObj.scorerange.length); 
 for(var i=0;i<dataObj.scorerange.length;i  ){ 
  var s1 = dataObj.scorerange[i].s1; 
  var s2 = dataObj.scorerange[i].s2; 
  var s3 = dataObj.scorerange[i].content; 
  var s4 = dataObj.scorerange[i].classg; 
  //alert(s1 " " s2 " " s3); 
  insertRowLast(false,s1,s2,s3,s4); 
 } 
}else{ 
 insertRowLast(true,0,0,0,0); 
} 
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; } 

亚洲城ca88唯一官方网站 3

总结

CSS渲染了表格样式,让表格看起来更舒服点。
亚洲城ca88唯一官方网站,jQuery
提到jquery,一定要记住在页面的<head>之间要引用jquery和jeditable插件

从上面的运行效果来看,我们很容易看出来,这个表格的基本轮廓已经显示出来,但是似乎少了些许味道,接着,我们来设置一下表格的样式,我们来编写css的代码,如下所示:

以上所述是小编给大家介绍的jQuery实现可编辑表格并生成json结果(实例代码),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jquery.jeditable.js"></script> 
table {
  border: 1px solid black;
  /*修正单元格之间的边框不能合并*/
  border-collapse: collapse;
  width: 400px;
}
table td {
  border: 1px solid black;
  width: 50%;
}
table th {
  border: 1px solid black;
  width: 50%;
}
tbody th {
  background-color: #A3BAE9;
}

您可能感兴趣的文章:

  • 基于Bootstrap使用jQuery实现简单可编辑表格
  • BootStrap和jQuery相结合实现可编辑表格
  • jQuery PHP实现可编辑表格字段内容并实时保存
  • jQuery(非HTML5)可编辑表格实现代码
  • 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
  • jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
  • jQuery json实现动态创建复杂表格table的方法

然后开始调用插件。

分析一下上面的代码,table{}这种写法称作为标签选择器,可以对整个页面所有的table产生影响;table td{}这种写法表示的是table中包含的所有td;可以通过broder-collapse:collapse这种方式来使表格中的单元格边框合并。接着,我们连运行一下,看看运行的效果:

$(function(){ 
   $('.edit').editable('save.php', { 
     width   :120, 
     height  :18, 
     //onblur  : 'ignore', 
     cancel  : '取消', 
     submit  : '确定', 
     indicator : '<img src="loader.gif">', 
     tooltip  : '单击可以编辑...' 
   }); 
}); 

亚洲城ca88唯一官方网站 4

插件提供了很多属性和方法的调用。可以设置宽度,高度,按钮的文本信息,提交时的加载图片,鼠标滑上的提示信息等等。save.php是编辑后的信息最终提交的后台程序的地址。现在看看是不是表格中的信息可以编辑了哦。
jeditable还提供了select,textarea类型的编辑,并提供插件api接口。
来看下拉选择框select的处理:

上述的运行效果,已经非常接近我们需要实现的效果了,但是还是欠点火候,还是不能都编辑,接着,js里面的代码,相应的,在js中我们也要建立两个文件,一个jquery一个editTable,鉴于jquery的代码较多,所以小编已经上传相关资源,有需要的小伙伴可以下载文末链接,接着,我们来编写ueditTable的代码,来给整理页面添加行为能力:

$('.edit_select').editable('save.php', { 
  loadurl  : 'json.php', 
  type   : "select", 
}); 
//需要首先通过Javascript来解决内容部分奇偶行的背景色不同
//$(document).ready(function(){
//
//});
//简化的ready写法
$(function(){
  //找到表格的内容区域中所有的奇数行
  //使用even是为了把通过tbody tr返回的所有tr元素中,在数组里面下标是偶数的元素返回,因为这些元素,实际上才是我们期望的tbody里面的奇数行
  $("tbody tr:even").css("background-color","#ECE9D8");
  //我们需要找到所有的学号单元格
  var numTd = $("tbody td:even");
  //给这些单元格注册鼠标点击的事件
  numTd.click(function() {
    //找到当前鼠标点击的td,this对应的就是响应了click的那个td
    var tdObj = $(this);
    if (tdObj.children("input").length > 0) {
      //当前td中input,不执行click处理
      return false;
    }
    var text = tdObj.html();
    //清空td中的内容
    tdObj.html("");
    //创建一个文本框
    //去掉文本框的边框
    //设置文本框中的文字字体大小是16px
    //使文本框的宽度和td的宽度相同
    //设置文本框的背景色
    //需要将当前td中的内容放到文本框中
    //将文本框插入到td中
    var inputObj = $("<input type='text'>").css("border-width","0")
      .css("font-size","16px").width(tdObj.width())
      .css("background-color",tdObj.css("background-color"))
      .val(text).appendTo(tdObj);
    //是文本框插入之后就被选中
    inputObj.trigger("focus").trigger("select");
    inputObj.click(function() {
      return false;
    });
    //处理文本框上回车和esc按键的操作
    inputObj.keyup(function(event){
      //获取当前按下键盘的键值
      var keycode = event.which;
      //处理回车的情况
      if (keycode == 13) {
        //获取当当前文本框中的内容
        var inputtext = $(this).val();
        //将td的内容修改成文本框中的内容
        tdObj.html(inputtext);
      }
      //处理esc的情况
      if (keycode == 27) {
        //将td中的内容还原成text
        tdObj.html(text);
      }
    });
  });
});

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

运行效果如下:

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

亚洲城ca88唯一官方网站 5

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

完整实例代码点击此处本站下载.rar)。

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

更多关于jQuery相关内容感兴趣的读者可查看本站专题:《jQuery form操作技巧汇总》、《jQuery常用插件及用法总结》、《jQuery操作json数据技巧汇总》、《jQuery扩展技巧总结》、《jQuery拖拽特效与技巧总结》、《jQuery表格(table)操作技巧汇总》、《jquery中Ajax用法总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》

不难发现,其实上述代码中的data就是一串json数据。
textarea类型就不再多数,将type类型改为textarea就可以了。PS:默认类型为text。
当处理日期类型时,我接入了一个jquery ui的日历插件,当然别忘了要引入juqery ui插件和样式:

希望本文所述对大家jQuery程序设计有所帮助。

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

您可能感兴趣的文章:

  • jQuery实现的可编辑表格完整实例
  • 基于Bootstrap使用jQuery实现简单可编辑表格
  • BootStrap和jQuery相结合实现可编辑表格
  • jQuery PHP实现可编辑表格字段内容并实时保存
  • JQuery实现可编辑的表格实例讲解(2)
  • 基于JQuery制作可编辑的表格特效
  • jQuery(非HTML5)可编辑表格实现代码
  • 基于PHP Jquery制作的可编辑的表格的代码
  • jquery学习笔记二 实现可编辑的表格
  • 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
  • jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera

接入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,详细过程大家自己写一个吧。
如此,可编辑的表格就此收工。但是还不能完工,关于对输入信息的有效性的验证问题后面的文章我会陆续附上,敬请关注。

希望小编整理的每一篇文章都对大家有所帮助。

您可能感兴趣的文章:

  • 基于Bootstrap使用jQuery实现简单可编辑表格
  • BootStrap和jQuery相结合实现可编辑表格
  • jQuery(非HTML5)可编辑表格实现代码
  • 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
  • jQuery一步一步实现跨浏览器的可编辑表格,支持IE、Firefox、Safari、Chrome、Opera
  • jQuery 实现双击编辑表格功能

编辑:亚洲城ca88唯一官方网站 本文来源:附demo源码下载亚洲城ca88唯一官方网站,jQuery完毕

关键词: 亚洲城ca88