可编辑表格，ajax编辑表格 js
2014-02-25 11:35
579 查看
调用js文件 CL_TableEdit-0.0.1.js
例子：
/**
* CL_TableEdit 编辑插件（适用于表格内修改单元格文本）
* Author: ..
* Email: lu_chuliang@sina.com
* Version: 0.0.1
* Date: Fri Jan 11 2013 11:47:42 GMT+0800 (中国标准时间)
*
* 原型：
* CL_TableEdit(obj[,callback[,arg]])
* @obj 需要更改内容的dom元素
* @callback 可选，内容更改前调用的函数（函数返回值将为更改后的内容），如果此参数被缺省，则直接将输入的内容修改至dom元素
* @arg 可选，在调用callback时需要传递的参数（callback函数将能接收到此参数）
**/
function CL_TableEdit(obj,callback,arg){
var tag = obj.firstChild.tagName;
if (typeof(tag) != "undefined" && tag.toLowerCase() == "input")
return;
/* 保存原始的内容 */
var org = obj.innerHTML;
var val = obj.innerText ? obj.innerText : obj.textContent;
/* 创建一个输入框 */
var txt = document.createElement("INPUT");
txt.value = (val == 'N/A') ? '' : val;
//txt.style.width = (obj.offsetWidth) + "px" ;
/* 隐藏对象中的内容，并将输入框加入到对象中 */
obj.innerHTML = "";
obj.appendChild(txt);
txt.focus();
/* 编辑区输入事件处理函数 */
txt.onkeypress = function(e){
var evt = e || window.event;
switch(e.keyCode | e.which | e.charCode){
case 13:
txt.blur();
break;
case 27:
obj.innerHTML = org;
break;
}
}
/* 编辑区失去焦点的处理函数 */
txt.onblur = function(e){
var val = txt.value;
if (val.length > 0 && val!=org){
if(typeof(callback)=="undefined"){
obj.innerHTML = val;
}
else if(typeof(callback)=="function"){
var r = callback(val, arg);
if(typeof(r)=="string")
obj.innerHTML = r;
else
obj.innerHTML = org;
}
else
obj.innerHTML = org;
}
else
obj.innerHTML = org;
}
}例子：
<!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/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CL_TableEdit示例</title>
<script type="text/javascript" src="CL_TableEdit-0.0.1.js"></script>
<style type="text/css">
<!--
input {
width:100%;
height:100%;
margin: 0px;
padding: 0px;
border-top-style: none;
border-right-style: none;
border-bottom-style: none;
border-left-style: none;
background-color: #DDFFEE;
color: #FF0000;
font-size: 14px;
}
td {
word-break:break-all;
}
body {
font-size: 16px;
}
#idid {
border: 1px solid #99CCFF;
height: 22px;
}
-->
</style>
</head>
回车键确定修改，Esc键取消修改
<body><table border="1" cellspacing="0" cellpadding="0" width="100%" style="table-layout:fixed;">
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
<td onclick="CL_TableEdit(this)">123456</td>
</tr>
</table>
<br />
<br />
<br />
<br />
<br />
执行函数
<script>
function onEdit(str,arg){
$.ajax({
async:false,
type:"POST",
url:"ad_xiaohao_his.php",
data:{id:arg,dopost:'update',date_xiaohao:str},
success:function(data){
if(data=='ok'){
se=1;
}else {
alert(data);
}
}
,error:function(data){
alert('网络连接失败');
}
});
document.getElementById("show").innerHTML = "输入的内容："+str+"<br />传递的参数："+arg+"<br />函数返回："+str;
alert(arg);
return str;//返回的内容才是表格里的单元格的最后显示内容,如果用ajax提交数据的话，请使用非异步模式ajax
}
</script>
<div id="show"></div>
<table border="1" cellspacing="0" cellpadding="0" width="100%" style="table-layout:fixed;">
<tr>
<td onclick="CL_TableEdit(this,onEdit,'1-1')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'1-2')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'1-3')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,\"<?php echo "id='sdsdsdsd'&val='dsds ds'" ?>\")">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'1-5')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'1-6')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'1-7')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'1-8')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'1-9')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'1-0')">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this,onEdit,'2-1')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'2-2')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'2-3')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'na=')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'2-5')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'2-6')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'2-7')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'2-8')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'2-9')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'2-0')">123456</td>
</tr>
<tr>
<td onclick="CL_TableEdit(this,onEdit,'3-1')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-2')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-3')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-4')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-5')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-6')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-7')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-8')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-9')">123456</td>
<td onclick="CL_TableEdit(this,onEdit,'3-0')">123456</td>
</tr>
</table>
<br />
<br />
<br />
其实，并不一定要在表格里才能用，下面这个是一个div：
<div id="idid" onclick="CL_TableEdit(this)">13213213</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- js 表格排序(编辑+拖拽+缩放)
- vue.js设计的可编辑表格例子，内容与数组同步变化
- Ajax结合Js操作灵活操作表格
- editable.js 基于jquery的表格的编辑插件
- 用JS实现动态删除表格行、列、双击编辑的代码
- [js高手之路]Node.js+jade+mongoose实战todolist(分页,ajax编辑,删除)
- js控制表格实时编辑
- jquery js 可编辑表格
- javascript结合Ajax制作的可编辑表格代码
- JS实现可编辑的表格
- js中对arry数组的各种操作小结 瀑布流AJAX无刷新加载数据列表--当页面滚动到Id时再继续加载数据 web前端url传递值 js加密解密 HTML中让表单input等文本框为只读不可编辑的方法 js监听用户的键盘敲击事件，兼容各大主流浏览器 HTML特殊字符
- Ajax实现将可以编辑的表格与数据库交互
- 元素js_存dom对象表格增删以及编辑
- Html+js实现表格可编辑，并能动态添加删除行
- JS制作可编辑表格
- js可编辑表格
- 一款用于表格数据自定义排序的jQuery插件jquery.tablesortable.js（附ajax例子）
- 用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
- 可编辑的table. 添加数据，修改数据。稍加修改就可以部署到ajax 动态表格中