彩霞飞飞博客 | 偶滴淘宝店 | 偶滴微博
首页>Jquery> table td 可编辑

table td 可编辑

2012-09-18 14:27:07   浏览次数:2405   编辑者:itflyba

jquery 版

Java代码  
  1. <td onclick="realityNum(event.srcElement ? event.srcElement : event.target);">${p.PKGCOUNT}</td>  
  2. [b]注:[/b]event.srcElement ? event.srcElement : event.target)//判断浏览器IE为event.srcElement Firefox下为event.target.  
  3.   
  4. 函数:  
  5.   
  6. var oldObj="";  
  7. var $newNode=$("<input type='text' id='reality_input' style='width:40px;' maxlength='6'>");  
  8. function realityNum(obj){  
  9.     var oldValue=$(obj).text();  
  10.     if(obj.tagName=='TD'){  //点击的标签对象是不是TD,主要是避免当单击input也会触发此函数事件  
  11.           if(oldObj!=""){  //是否已创建input对象  
  12.                    var newValue=$.trim($("#reality_input").val());  
  13.                  if(validateNumber(newValue)){ //如果输入框中有值则把当前input对象删除,并把值填充到TD中,清空oldObj对象.  
  14.                        $(oldObj).html(newValue);                  oldObj="";   // 清空                                                                                                           return ;   
  15.                  }  
  16.           }  
  17.           oldObj=obj;     
  18.           $(obj).text('');   //清空obj中的文本  
  19.            $newNode.val(oldValue);    //赋值  
  20.            $(obj).append($newNode);   //把input元素添加到obj中   
  21.            $newNode.focus();    
  22.          }  
  23. }  

jquery 版2

Java代码 
  1. <td align="center" id="release_activate_count">${releaseActivateCount}</td>  
     
Java代码  
  1. var $newNode=$("<input type='text' id='release_activate_count_input' style='width:60px;' maxlength='6' 
  2. onclick='doSomething(this,event)'>");   
  3.     var $oldTdObj="";   //用于保存TD对象  
  4.     $(function(){  
  5.         $("td[id=release_activate_count]").click(function(){  
  6.             var $oldValue=$(this).text();                 //获取当前TD的值  
  7.             var $ifInput=$(this).children().is('input');  //是否存在input  
  8.             if($oldTdObj!=""){  
  9.                 var newValue=$("#release_activate_count_input").val();  
  10.                   
  11.                 if(!isPositiveNumber(newValue) && (typeof(newValue)!="undefined")){  
  12.                     alert("请输入正整数!");  
  13.                     return false;  
  14.                 }else{  
  15.                     $oldTdObj.text(newValue);  
  16.                 }  
  17.             }  
  18.             <%--如果td单元格中不存在input,则添加--%>  
  19.             if(!$ifInput){  
  20.                 $(this).text('');  
  21.                 $oldTdObj=$(this);  
  22.                 $(this).append($newNode);  
  23.                 $newNode.val($oldValue);  
  24.                 $newNode.focus();  
  25.             }  
  26.         });  
  27.     });  
  28.     <%--验证是否为正整数--%><%--如果td单元格中不存在input,则添加--%>  
  29.     function isPositiveNumber(s){  
  30.         var express=/^(0|[1-9][0-9]*)$/;  
  31.         return express.test(s);  
  32.     }  
  33.     <%--js阻止冒泡事件--%><%--验证是否为正整数--%><%--如果td单元格中不存在input,则添加--%>  
  34.     function doSomething(obj,evt){  
  35.         var e=(evt)?evt:window.event;  
  36.         if(window.event){  
  37.             e.cancelBubble=true;  
  38.         }else{  
  39.             e.stopPropagation();  
  40.         }  
  41.     }  

js版(转载)

Java代码  
  1. oldObj="";  
  2. var newNode=document.createElement("input");  
  3. newNode.type="text";  
  4. function setEdit(click_td){  
  5.      var obj;  
  6.      if(click_td.tagName=="TD"){  
  7.            if(oldObj!=""){  
  8.            oldObj.removeChild(eval("tmpText"));  
  9.            if(newNode.vlaue=="") oldObj.innerText=" ";  
  10.            else oldObj.innerText=newNode.value;  
  11.      }  
  12.      obj=click_td;  
  13.      oldObj=obj;  
  14.      newNode.width=obj.offsetWidth;  
  15.      newNode.height=obj.offsetHeight;  
  16.      newNode.id="tmpText";  
  17.      newNode.value=obj.innerText;  
  18.      obj.innerText="";  
  19.      obj.appendChild(newNode);  
  20.      newNode.focus();  

 


评论(*为必填项)

友情链接

  • 菲尔玛仕品牌
  • 彩霞飞飞
  • 游戏平台