jQuery实现的可编辑表格完整实例
本文实例讲述了jQuery实现的可编辑表格。分享给大家供大家参考，具体如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>可编辑表格</title>
<script type = "text/javascript" src="jquery-1.7.2.min.js"></script>
<style type = "text/css">
body{
background:#c0c0c0;
}
#tab{
border-collapse:collapse;
}
#tab td{
width:50px;
height:18px;
border:1px solid;
text-align:center;
}
</style>
<script type = "text/javascript">
$(function(){
var tds = $("#tab tr td");
editeTable(tds);
});
function editeTable(tds){
tds.click(function(){
var td=$(this);
var oldText=td.text();
var input=$("<input type='text' value='"+oldText+"'/>");
td.html(input);
input.click(function(){
return false;
});
input.css("border-width","1px");
input.css("font-size","12px");
input.css("text-align","center");
input.css("width","0px");
input.width(td.width());
input.trigger("focus").trigger("select");
input.blur(function(){
td.html(oldText);
});
input.keyup(function(event){
var keyEvent=event || window.event;
var key=keyEvent.keyCode;
var input_blur=$(this);
switch(key)
{
case 13:
var newText=input_blur.val();
td.html(newText);
changeCurrConAttrByTable(currTableId);
break;
case 27://按下esc键，取消修改，把文本框变成文本
td.html(oldText);
break;
}
});
});
};
</script>
</head>
<body>
<table id = "tab">
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
<tr>
<td>1</td><td>1</td><td>1</td><td>1</td><td>1</td>
</tr>
</table>
</body>
</html>
更多关于jQuery相关内容感兴趣的读者可查看本站专题：《jQuery表格(table)操作技巧汇总》、《jQuery常用插件及用法总结》、《jquery中Ajax用法总结》、《jQuery拖拽特效与技巧总结》、《jQuery扩展技巧总结》、《jQuery常见经典特效汇总》、《jQuery动画与特效用法总结》及《jquery选择器用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
相关推荐
-
jQuery实现点击表格单元格就可以编辑内容的方法【测试可用】
本文实例讲述了jQuery实现点击表格单元格就可以编辑内容的方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/
-
JQuery 动态生成Table表格实例代码
JQuery动态生成Table表格 主要用到了JQuery中的append和appendto的方法,具体代码如下: <!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&quo
-
基于jQuery实现表格的排序
$(function(){ //存入点击列的每一个TD的内容: var aTdCont = []; //点击列的索引值 var thi = 0 //重新对TR进行排序 var setTrIndex = function(tdIndex){ for(i=0;i<aTdCont.length;i++){ var trCont = aTdCont[i]; $("tbody tr").each(function() { var thisText = $(this).children(&q
-
jQuery实现表格行和列的动态添加与删除方法【测试可用】
本文实例讲述了jQuery实现表格行和列的动态添加与删除方法.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/19
-
jQuery+json实现动态创建复杂表格table的方法
本文实例讲述了jQuery+json实现动态创建复杂表格table的方法.分享给大家供大家参考,具体如下: function SetSubTable() { var obj = jQuery.parseJSON($("#SubJsonStrValue").val()); window.ALLPARAMTERS = obj; var row_str = ""; var span_num = 1 for (var i = 0; i < obj.length; i+
-
jquery表格datatables实例解析 直接加载和延迟加载
参考自官方文档,需要引入jquery.js,jquery.dataTables.js,dataTables.bootstrap.js(可选), 由于时间紧,省略了很多,所以总结份简化版的仅供参考. 1.直接加载,这个比较简单,如下 <div id="tid" class="col-sm-12 col-md-12"> <div id="secondtid" hidden="hidden"></div
-
详解jQuery简单的表格应用
大致介绍 在CSS技术之前,网页的布局基本都是依靠表格制作,当有了CSS之后,表格就被很多设计师所抛弃,但是表格也有他的用武之地,比如数据列表,下面以表格中常见的几个应用来加深对jQuery的认识. 表格变色 基本的结构: <table> <thead> <tr><th>姓名</th><th>性别</th><th>暂住地</th></tr> </thead> <tbod
-
基于jQuery实现表格的查看修改删除
效果图: HTML: <table id="table"> <tr> <th>姓名</th> <th>年龄</th> <th>职位</th> <th>薪资</th> <th>操作</th> </tr> <tr> <td>张三</td> <td>23</td> <td&
-
基于jQuery实现表格内容的筛选功能
废话不多说了,直接给大家贴关键代码了.具体代码如下所示: <html> <head> <title>表格内容的筛选</title> <link type="text/css" rel="stylesheet" href="css/contains.css" /> <style type="text/css"> table { width: 50%; bor
-
jQuery实现的表格展开伸缩效果实例
本文实例讲述了jQuery实现的表格展开伸缩效果.分享给大家供大家参考,具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <style> table { border:0;border-collapse:collapse;} td {