`

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();
}
分享到:
评论

相关推荐

    对Vue table 动态表格td可编辑的方法详解

    今天小编就为大家分享一篇对Vue table 动态表格td可编辑的方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    在antd Table中插入可编辑的单元格实例

    补充知识:React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求: 实现功能说明: 点击添加按钮,在表格中添加新的空白行(如下图所示),在点击提交的时候获取空白行的数据 在...

    angularjs实现table表格td单元格单击变输入框/可编辑状态示例

    本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考,具体如下: html部分: &lt;table&gt; ;&gt;序号 班次 分组 操作 &lt;td width=40px;&gt;{{value.id }}&lt;/td&gt; &lt;td...

    uniapp-table中改版uni-table插件

    改版uni-table插件功能,新增单击行事件、单击某td事件、单独修改某td的字体颜色;选中行样式修改。主要修改文件uni-tr、uni-td;

    bootstrap table实现双击可编辑、添加、删除行功能

    本文实例为大家分享了bootstrap table双击可编辑的具体代码,供大家参考,具体内容如下 html: &lt;table class=table id=para_table&gt; 名称 值 操作 &lt;td style=tex

    vue el-table实现行内编辑功能

    主要为大家详细介绍了vue el-table实现行内编辑功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

    jQuery自适应PC手机端可编辑表格代码.zip

    &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。

    jQuery获取table下某一行某一列的值实现代码

    &lt;table name=info&gt;&lt;tr&gt;&lt;td&gt;lily&lt;span&gt;okok&lt;/span&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;18&lt;/td&gt;&lt;/tr&gt;&lt;tr xss=removed&gt;&lt;td&gt;hahhha&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt; &lt;table name=info&gt;&lt;tr&gt;&lt;td&gt;tom&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;22&lt;/td&gt;&lt;/tr&gt;&lt;

    自适应PC手机端的C3 jQuery可编辑表格代码.zip

    &lt;table class="table table-bordered table-hover"&gt; &lt;td&gt;姓名&lt;/td&gt; &lt;td&gt;性别&lt;/td&gt; &lt;td&gt;年龄&lt;/td&gt; &lt;td&gt;电话&lt;/td&gt; &lt;td&gt;操作&lt;/td&gt; &lt;td colspan="5" class="danger"&gt;增加&lt;/button&gt;&lt;/td&gt; &lt;/table&gt;

    使用JQuery实现的动态编辑表格

    基本功能都已实现,本人能力有限,比不上layui数据表格样式的完善,所以我其实有点遗憾,如果有哪位大神,能让table的表头固定在最上面一行,并且能让 删除功能的 td一直停靠在table的最右边 说白了就是类似 layui...

    html-table-editor-resizer:表格插件拖动,合并,编辑插件。Merge cells, split cells, drag to resize table , a very usefull table plugin with no dependency

    原生javascript表格插件,可以拖动改变大小,合并单元格等 Demo 安装 npm install npm run dev ...t.CreateFromString('&lt;table&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;/td&gt;&lt;td&gt;&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;',document.bo

    table-editer可以滑动复制,可以编辑,可以使用日历选择日期的jquery代码实现

    //以下两个方法可以使表格不可编辑区域也能进行复制,在td标签上加上class="copy-td" $(".copy-td").mousedown(function(){ console.log('鼠标按下,解绑') that.selectableVaribal.unBangdingSelectable(); // ...

    JavaScript控制table某列不显示的方法

    本文实例讲述了JavaScript控制table某列不显示的方法。分享给大家供大家参考。具体实现方法如下: 1、table代码 代码如下:&lt;table id=”mytable” border=”0″ width=”1400″ align=”center” ...td width=

    原创-javascript服务器交互型可编辑表格和我的js常用库

    自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs ...

    tablegroup.rar

    在页面上生成多表格(可编辑),像excel可以删除表格行列,兼容ie表格编辑的问题,但是在其他浏览器上会有点不美观,如果想要美观点可以将插件中的 1 标签去掉,将contenteditable='true'属性加到div父类td中,...

    layui点击按钮添加可编辑的一行方法

    昨天已经成功添加了一行,今天希望所添加的一行可以进行单元格编辑。... " &lt;td data-field='domainId' data-edit='text'&gt; &lt;div class='layui-table-cell laytable-cell-1-domainId '&gt;11 &lt;/div&gt;&lt;/td

    jQuery(非HTML5)可编辑表格实现代码

    而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据源代码: HTML代码: 代码如下: &lt;table class=”editableTable”&gt; &lt;thead&gt; &lt;tr&gt; &lt;th&gt;Item1&lt;/th&gt; &lt;th&gt;Item2&lt;/th&gt; &lt;th&gt;Item3...

    jQuery实现可编辑的表格实例讲解(2)

    本文实例为大家分享了jQuery实现可编辑表格的具体代码,供大家参考,具体内容如下 我们最终要达到的效果如下: 当单击学号列的时候,可以进行编辑: 当单击ESC的时候,操作取消,当单击回车的时候,修改生效(没有...

Global site tag (gtag.js) - Google Analytics