JQuery实现可编辑表格
2014-05-13 17:07
281 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>lianxi</title> <script src="jquery-1.8/jquery-1.8.0.js"></script> <style> p{text-align:center;} </style> <script> $(document).ready(function(){ var data=[{nub:"1",name:"Tim",apartment:"人事部",worknub:"1401"}, {nub:"2",name:"TompSon",apartment:"咨询部",worknub:"1402"}, {nub:"3",name:"chanel",apartment:"安保部",worknub:"1403"}]//JSon对象 var tab1=$("#tab") $.each(data,function(index,item){ var row=$("<tr></tr>"); $.each(item,function(name,value){ var td=$("<td></td>").html(value); row.append(td); }); tab1.append(row); });//为表单填充对应JSon值 $("#tab").find("tr:not(:first)").each(function(){ $(this).children().eq("0").addClass("nub"); $(this).children().eq("1").addClass("name"); $(this).children().eq("2").addClass("apartment"); $(this).children().eq("3").addClass("worknub"); });//为每个对应的列添加class名 $("#tab").find("td").click(function a(){ var inputSize=$(this).find("input").size(); if(inputSize>0) return; var tdText=$(this).text(); var inputObj=$('<input type="text" />'); $(this).empty().append(inputObj); inputObj.val(tdText); //给td绑定单击事件,当点击时增加<input/> $("#tab").find("input").blur(function() { var inputText = $(this).val(); $(this).parent().html(inputText); $(this).click(a); }); //当input失去焦点时,变量inputText保存当前值,清空当前父元素的内容并填充文本,在给当前td重新拥有点击事件 }); $("#btn1").click(function(){ var inputObj=$("#tab").find("input[type='text']"); if(inputObj.size()>0){ inputObj.each(function(){ var val=$(this).val(); $(this).parent().empty().html(val); }); };//单击保存按钮,使其清空所有inpu var JsonText=""; $("#tab").find("tr:not(:first)").each(function(){ JsonText+="{"; $(this).find("td").each(function(){ JsonText+='"'+$(this).attr("class")+'":"'+$(this).text()+'",'; }); JsonText=JsonText.substr(0,JsonText.length-1); JsonText+="},"; }); JsonText=JsonText.substr(0,JsonText.length-1); console.log("["+JsonText+"]"); }); //取出数据拼接成JSon格式 }); </script> </head> <body> <table id="tab" align="center" border="1"> <tr> <th>编号</th> <th>姓名</th> <th>部门</th> <th>工号</th> </tr> </table> <p><input id="btn1" type="button" value="保存" /></p> </body> </html>
相关文章推荐
- 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
- jQuery实现可以编辑的表格实例详解【附demo源码下载】
- jquery实现编辑表格
- jQuery实现可编辑表格
- jQuery实现可编辑表格
- 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
- jQuery 实现双击编辑表格功能
- 可编辑的表格(续集):jQuery实现对所编辑内容的验证
- 《Javaweb---JQuery实现可编辑的表格》
- HTML之JQuery基础实现可编辑表格
- jQuery-easyUI的使用:datagrid实现可编辑表格
- [原创+源码]绝对强悍:jQuery实现可编辑表格的用户管理系统(一)
- 基于Bootstrap使用jQuery实现简单可编辑表格
- jQuery实现可编辑表格
- jQuery仿Excel表格编辑功能的实现代码
- jQuery仿Excel表格编辑功能的实现代码
- [原创+源码]绝对强悍:jQuery实现可编辑表格的用户管理系统 (二)
- jquery实现动态表格编辑
- 基于Bootstrap使用jQuery实现简单可编辑表格
- jQuery实现可编辑的表格