`

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

相关推荐

    bootstrap插件_table可编辑表格_demo

    在可编辑表格中,我们通常会使用`&lt;td&gt;`(单元格)和`&lt;th&gt;`(表头单元格)元素,通过添加额外的类或者事件监听器来实现编辑功能。 编辑表格的实现通常依赖于JavaScript和CSS,可能涉及到以下技术点: 1. **事件监听...

    js+html实现的Table可编辑

    在实现可编辑表格时,我们需要在用户点击单元格时将`&lt;td&gt;`元素替换为`&lt;input&gt;`或`&lt;textarea&gt;`,并在用户完成编辑后将数据保存回`&lt;td&gt;`。这可能涉及到`innerHTML`属性、`createElement`、`appendChild`等方法。 4. *...

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

    本文将详细介绍在Vue项目中实现table动态表格td可编辑的方法。 首先,需要明确几个关键点: 1. 使用Vue.js框架。 2. 表格使用的是elementUI组件库,这是基于Vue.js的UI框架。 3. 使用了el-table-column组件,这是...

    HTML5可编辑Table

    &lt;td contenteditable="true"&gt;这是可编辑的内容&lt;/td&gt; &lt;/table&gt; ``` 在这个例子中,"这是可编辑的内容"所在的单元格就变成了用户可以直接修改的文本框。当用户在浏览器中点击该单元格时,可以直接输入或修改文本,...

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

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

    jquery将table表格变成可编辑

    要实现表格可编辑,我们主要关注`&lt;td&gt;`元素。 在jQuery中,我们可以利用`.click()`事件监听用户对表格单元格的点击。当用户点击某个单元格时,我们将该单元格的内容变为可编辑的输入框(`&lt;input&gt;`)。以下是一个...

    纯js和html可编辑的table(表格)

    "纯js和html可编辑的table(表格)"这个项目提供了一种方法,允许用户直接在网页上对表格进行编辑,增强了用户的交互体验。接下来,我们将深入探讨如何使用JavaScript (JS) 和 HTML 实现这样的功能,以及涉及的相关...

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

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

    javascript将html的table变为可编辑表格

    要使表格可编辑,我们可以利用JavaScript事件监听器来捕获用户的交互,并在适当的时候将`&lt;td&gt;`元素替换为输入框(`&lt;input&gt;`)。以下是一个简单的实现方法: 1. **添加事件监听器**:在JavaScript中,我们可以使用`...

    uniapp-table中改版uni-table插件

    3. **单独修改某td的字体颜色**:在默认情况下,`uni-table`的样式可能无法满足所有需求,特别是当需要对某些特定单元格进行高亮显示时。开发者通过自定义样式或者动态设置样式,实现了对单个单元格字体颜色的控制,...

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

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

    jqueryTable编辑的实现

    在本文中,我们将深入探讨如何实现`jQuery Table`编辑功能,包括鼠标点击表格单元格进行编辑,以及在失去焦点(onblur)时通过Ajax保存数据。此外,我们还将提及与实现此功能相关的`jQuery`和`Table`技术。 首先,`...

    HTML table表格编辑器

    "HTML Table表格编辑器"是一款工具,旨在提供一种便捷的方式,帮助用户在网页上创建、编辑和管理HTML表格。这款编辑器提供了诸如上下移动行、单元格内数据编辑等功能,大大提升了在网页中操作表格的效率。 在HTML中...

    .net 双击td可以编辑

    标题中的".net 双击td可以编辑"是一个关于.NET框架下使用JavaScript实现表格(table)单元格(td)双击编辑功能的技术点。在Web应用中,用户界面的交互性通常是一个关键因素,允许用户通过双击某个元素来激活编辑...

    table动态添加行并编辑

    1. 更改单元格内容为输入框:将`&lt;td&gt;`内容替换为`&lt;input&gt;`元素,允许用户编辑。 2. 绑定事件:如失去焦点(`blur`)、回车(`keydown`,检测`event.keyCode === 13`)等事件,捕获用户输入。 3. 保存更改:当编辑...

    bootstrap table编辑表格所需文件

    3. **启用可编辑功能**:为了使表格中的单元格变为可编辑,我们需要为每个需要编辑的单元格添加`data-x-editable`属性,并指定编辑类型。例如,对于文本编辑,可以设置`data-x-editable="true"`,对于日期编辑,可以...

    一样的table?不一样的table(可编辑状态table)

    不一样的table(可编辑状态table)”时,这意味着我们正在讨论一个与传统静态表格有所不同的动态表格。 在描述中,作者指出,当鼠标点击表格中的某个数据单元格时,该单元格会转变为可编辑状态,允许用户直接修改其中...

    jquery实现table自动添加行和编辑

    var newRow = $("&lt;tr&gt;&lt;td&gt;新姓名&lt;/td&gt;&lt;td&gt;新年龄&lt;/td&gt;&lt;td&gt;编辑&lt;/button&gt; 删除&lt;/button&gt;&lt;/td&gt;&lt;/tr&gt;"); $("#dataTable tbody").append(newRow); }); ``` 这里,我们假设有一个id为`addRow`的按钮触发添加行的操作。...

Global site tag (gtag.js) - Google Analytics