可编辑表格，ajax编辑表格 js

调用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,'1-2')">123456</td>
    <td onclick="CL_TableEdit(this,'1-3')">123456</td>
    <td onclick="CL_TableEdit(this,\"<?PHP echo "id='sdsdsdsd'&val='dsds ds'" ?>\")">123456</td>
    <td onclick="CL_TableEdit(this,'1-5')">123456</td>
    <td onclick="CL_TableEdit(this,'1-6')">123456</td>
    <td onclick="CL_TableEdit(this,'1-7')">123456</td>
    <td onclick="CL_TableEdit(this,'1-8')">123456</td>
    <td onclick="CL_TableEdit(this,'1-9')">123456</td>
    <td onclick="CL_TableEdit(this,'1-0')">123456</td>
  </tr>
  <tr>
    <td onclick="CL_TableEdit(this,'2-1')">123456</td>
    <td onclick="CL_TableEdit(this,'2-2')">123456</td>
    <td onclick="CL_TableEdit(this,'2-3')">123456</td>
    <td onclick="CL_TableEdit(this,'na=')">123456</td>
    <td onclick="CL_TableEdit(this,'2-5')">123456</td>
    <td onclick="CL_TableEdit(this,'2-6')">123456</td>
    <td onclick="CL_TableEdit(this,'2-7')">123456</td>
    <td onclick="CL_TableEdit(this,'2-8')">123456</td>
    <td onclick="CL_TableEdit(this,'2-9')">123456</td>
    <td onclick="CL_TableEdit(this,'2-0')">123456</td>
  </tr>
  <tr>
    <td onclick="CL_TableEdit(this,'3-1')">123456</td>
    <td onclick="CL_TableEdit(this,'3-2')">123456</td>
    <td onclick="CL_TableEdit(this,'3-3')">123456</td>
    <td onclick="CL_TableEdit(this,'3-4')">123456</td>
    <td onclick="CL_TableEdit(this,'3-5')">123456</td>
    <td onclick="CL_TableEdit(this,'3-6')">123456</td>
    <td onclick="CL_TableEdit(this,'3-7')">123456</td>
    <td onclick="CL_TableEdit(this,'3-8')">123456</td>
    <td onclick="CL_TableEdit(this,'3-9')">123456</td>
    <td onclick="CL_TableEdit(this,'3-0')">123456</td>
  </tr>
</table>

<br />
<br />
<br />
其实，并不一定要在表格里才能用，下面这个是一个div：
<div id="idid" onclick="CL_TableEdit(this)">13213213</div>
</body>
</html>

原文链接：https://www.f2er.com/ajax/165234.html

可编辑表格，ajax编辑表格 js

猜你在找的Ajax相关文章