调用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 οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="CL_TableEdit(this)">123456</td>
<td οnclick="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 οnclick="CL_TableEdit(this,onEdit,'1-1')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'1-2')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'1-3')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,\"<?php echo "id='sdsdsdsd'&val='dsds ds'" ?>\")">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'1-5')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'1-6')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'1-7')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'1-8')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'1-9')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'1-0')">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this,onEdit,'2-1')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'2-2')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'2-3')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'na=')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'2-5')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'2-6')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'2-7')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'2-8')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'2-9')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'2-0')">123456</td>
</tr>
<tr>
<td οnclick="CL_TableEdit(this,onEdit,'3-1')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-2')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-3')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-4')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-5')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-6')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-7')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-8')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-9')">123456</td>
<td οnclick="CL_TableEdit(this,onEdit,'3-0')">123456</td>
</tr>
</table>
<br />
<br />
<br />
其实,并不一定要在表格里才能用,下面这个是一个div:
<div id="idid" οnclick="CL_TableEdit(this)">13213213</div>
</body>
</html>