JQuery页面动态修改单元格

jQuery('#tab tbody tr td:not([class="checkGroup"])').dblclick(function(){
    var text = $(this).text();
    var tdObj = $(this);
    tdObj.text("");
    $(this).append("<input type='text' class='form-control' value='"+text+"'>");
    $(this).find('input').focus();
    $(this).find('input').blur(function(){
        var val = $(this).val();
        $(this).remove();
        tdObj.text(val);
    });
});

现在已经初步的完成了双击单元格出现编辑框-Nodejs 之mongoskin集合增删参数化，页面动态修改单元格 - 夏夜寒 - hule`s sky却发现了新的问题： 之前在页面内初始的一行单元格可以修改，但通过点击button动态新加的行列(单元格)无法弹出输入框，通过chrome调试定位到无法定位新添加的单元格（jquery选择器没有选择到该单元格）；

首先解决上面页面动态修改表格中的单元格的问题
之前无法获取到单元格的Jquery对象，原因：动态新创建的单元格还未加载到DOM对象，无法通过JQuery获取到， 若要获取需等到DOM加载结束，就可以通过document对象进行查找，方法如下:

jQuery(document).on('dblclick','#tab tbody tr td:not([class="checkGroup"])',function(event){}
var tdObj = $(event.target);//获得触发事件的元素,即单元格对象

这样我们就可以灵活的操纵该单元格对象了，之前是设计点击单元格之后在其中添加一个input输入框，后来考虑到td宽度固定以及单元格(或新改动内容的长度不定)，输入框难以胜任，故舍之，重新换一种思路：再点击处浮现一个div（带有textarea和button），其位置随着点击的位置不同而变化。则应该考虑以下问题：

• 定位div的位置(可根据窗口的大小、点击位置以及div的宽高设定)
• 设置div的position：absolute z-index:9999

<div id="runDiv" hidden="hidden">
    <textarea id="newText" cols="5" rows="3" ></textarea>
    <div style="margin-top: 5px;" align="right">
        <button class="btn btn-success btn-xs" name="saveNewText">保存</button>
        <button class="btn btn-default btn-xs" name="cancelNewText">取消</button>
    </div>
</div>

#runDiv{
    border:1px solid #DBDBDB;
    background-color: #E5E5E5;
    border-radius: 5px;
    padding: 5px;
    position: absolute;
    z-index: 9999;
}
#newText{
    display: block;
    overflow: auto;
    width: 200px;
    border: 0px;
    outline: 0px;
    color: #666464;
}

//修改单元格内容
jQuery(document).on('dblclick','#tab tbody tr td:not([class="checkGroup"])',function(event){
	//获得窗口的宽度 高度
	var winW=document.body.clientWidth;
	var winH=document.body.clientHeight;
	alert("窗口的宽高："+winH+"><"+winW);
	//获得鼠标点击时的坐标
	var pointX = window.event.clientX;
	var pointY = window.event.clientY;
	//获得弹出div的高  宽
	var runDivH = $('#runDiv').height();
	var runDivW =$('#runDiv').width();
	//计算弹出div的位置
	var x = ((pointX-runDivW/2)>0)?(pointX-runDivW/2):0;
	var y = ((pointY-runDivH/2)>0)?(pointY-runDivH/2):0;
	x = ((x+runDivW)>winW)?(winW-runDivW):x;
	y = ((y+runDivH)>winH)?(winH-runDivH):y;
	//获得单元格的内容
	var text = $(event.target).text();
	var tdObj = $(event.target);
	//设置弹出div的位置
	$("#runDiv").css("left",x);
	$("#runDiv").css("top",y);
	$("#runDiv").show();
   	$('#newText').focus().text(text).select();
	$('#runDiv button').click(function(){
		var saveBtnName = $('#runDiv button[name^="save"]').attr('name');
		var btnName = $(this).attr('name');
		if(btnName==saveBtnName){
			var newStr = $('#newText').val();
			tdObj.text(newStr);
		}
		$("#runDiv").hide();
	});
});

问题完美解决