当前位置: 代码迷 >> Web前端 >> table td 可编者
  详细解决方案

table td 可编者

热度:144   发布时间:2012-10-16 09:57:37.0
table td 可编辑
jquery 版
<td onclick="realityNum(event.srcElement ? event.srcElement : event.target);">${p.PKGCOUNT}</td>
[b]注:[/b]event.srcElement ? event.srcElement : event.target)//判断浏览器IE为event.srcElement Firefox下为event.target.

函数:

var oldObj="";
var $newNode=$("<input type='text' id='reality_input' style='width:40px;' maxlength='6'>");
function realityNum(obj){
	var oldValue=$(obj).text();
	if(obj.tagName=='TD'){  //点击的标签对象是不是TD,主要是避免当单击input也会触发此函数事件
	      if(oldObj!=""){  //是否已创建input对象
	               var newValue=$.trim($("#reality_input").val());
	             if(validateNumber(newValue)){ //如果输入框中有值则把当前input对象删除,并把值填充到TD中,清空oldObj对象.
	                   $(oldObj).html(newValue);                  oldObj="";   // 清空                                                                                  	                       return ; 
	             }
	      }
	      oldObj=obj;   
	      $(obj).text('');   //清空obj中的文本
	       $newNode.val(oldValue);    //赋值
	       $(obj).append($newNode);   //把input元素添加到obj中 
	       $newNode.focus();  
         }
}


jquery 版2
<td align="center" id="release_activate_count">${releaseActivateCount}</td>

var $newNode=$("<input type='text' id='release_activate_count_input' style='width:60px;' maxlength='6' onclick='doSomething(this,event)'>");
	var $oldTdObj="";   //用于保存TD对象
	$(function(){
		$("td[id=release_activate_count]").click(function(){
			var $oldValue=$(this).text();				  //获取当前TD的值
			var $ifInput=$(this).children().is('input');  //是否存在input
			if($oldTdObj!=""){
				var newValue=$("#release_activate_count_input").val();
				
				if(!isPositiveNumber(newValue) && (typeof(newValue)!="undefined")){
					alert("请输入正整数!");
					return false;
				}else{
					$oldTdObj.text(newValue);
				}
			}
			<%--如果TD单元格中不存在input,则添加--%>
			if(!$ifInput){
				$(this).text('');
				$oldTdObj=$(this);
				$(this).append($newNode);
				$newNode.val($oldValue);
				$newNode.focus();
			}
		});
	});
	<%--验证是否为正整数--%>
	function isPositiveNumber(s){
		var express=/^(0|[1-9][0-9]*)$/;
		return express.test(s);
	}
	<%--js阻止冒泡事件--%>
	function doSomething(obj,evt){
		var e=(evt)?evt:window.event;
		if(window.event){
			e.cancelBubble=true;
		}else{
			e.stopPropagation();
		}
	}


js版(转载)
oldObj="";
var newNode=document.createElement("input");
newNode.type="text";
function setEdit(click_td){
     var obj;
     if(click_td.tagName=="TD"){
           if(oldObj!=""){
           oldObj.removeChild(eval("tmpText"));
           if(newNode.vlaue=="") oldObj.innerText=" ";
           else oldObj.innerText=newNode.value;
     }
     obj=click_td;
     oldObj=obj;
     newNode.width=obj.offsetWidth;
     newNode.height=obj.offsetHeight;
     newNode.id="tmpText";
     newNode.value=obj.innerText;
     obj.innerText="";
     obj.appendChild(newNode);
     newNode.focus();
}
  相关解决方案