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();
}
分享到:
相关推荐
在可编辑表格中,我们通常会使用`<td>`(单元格)和`<th>`(表头单元格)元素,通过添加额外的类或者事件监听器来实现编辑功能。 编辑表格的实现通常依赖于JavaScript和CSS,可能涉及到以下技术点: 1. **事件监听...
在实现可编辑表格时,我们需要在用户点击单元格时将`<td>`元素替换为`<input>`或`<textarea>`,并在用户完成编辑后将数据保存回`<td>`。这可能涉及到`innerHTML`属性、`createElement`、`appendChild`等方法。 4. *...
本文将详细介绍在Vue项目中实现table动态表格td可编辑的方法。 首先,需要明确几个关键点: 1. 使用Vue.js框架。 2. 表格使用的是elementUI组件库,这是基于Vue.js的UI框架。 3. 使用了el-table-column组件,这是...
<td contenteditable="true">这是可编辑的内容</td> </table> ``` 在这个例子中,"这是可编辑的内容"所在的单元格就变成了用户可以直接修改的文本框。当用户在浏览器中点击该单元格时,可以直接输入或修改文本,...
要实现表格可编辑,我们主要关注`<td>`元素。 在jQuery中,我们可以利用`.click()`事件监听用户对表格单元格的点击。当用户点击某个单元格时,我们将该单元格的内容变为可编辑的输入框(`<input>`)。以下是一个...
本文实例为大家分享了bootstrap table双击可编辑的具体代码,供大家参考,具体内容如下 html: <table class=table id=para_table> 名称 值 操作 <td style=tex
补充知识:React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求: 实现功能说明: 点击添加按钮,在表格中添加新的空白行(如下图所示),在点击提交的时候获取空白行的数据 在...
"纯js和html可编辑的table(表格)"这个项目提供了一种方法,允许用户直接在网页上对表格进行编辑,增强了用户的交互体验。接下来,我们将深入探讨如何使用JavaScript (JS) 和 HTML 实现这样的功能,以及涉及的相关...
要使表格可编辑,我们可以利用JavaScript事件监听器来捕获用户的交互,并在适当的时候将`<td>`元素替换为输入框(`<input>`)。以下是一个简单的实现方法: 1. **添加事件监听器**:在JavaScript中,我们可以使用`...
3. **单独修改某td的字体颜色**:在默认情况下,`uni-table`的样式可能无法满足所有需求,特别是当需要对某些特定单元格进行高亮显示时。开发者通过自定义样式或者动态设置样式,实现了对单个单元格字体颜色的控制,...
本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考,具体如下: html部分: <table> ;>序号 班次 分组 操作 <td width=40px;>{{value.id }}</td> <td...
在本文中,我们将深入探讨如何实现`jQuery Table`编辑功能,包括鼠标点击表格单元格进行编辑,以及在失去焦点(onblur)时通过Ajax保存数据。此外,我们还将提及与实现此功能相关的`jQuery`和`Table`技术。 首先,`...
"HTML Table表格编辑器"是一款工具,旨在提供一种便捷的方式,帮助用户在网页上创建、编辑和管理HTML表格。这款编辑器提供了诸如上下移动行、单元格内数据编辑等功能,大大提升了在网页中操作表格的效率。 在HTML中...
标题中的".net 双击td可以编辑"是一个关于.NET框架下使用JavaScript实现表格(table)单元格(td)双击编辑功能的技术点。在Web应用中,用户界面的交互性通常是一个关键因素,允许用户通过双击某个元素来激活编辑...
1. 更改单元格内容为输入框:将`<td>`内容替换为`<input>`元素,允许用户编辑。 2. 绑定事件:如失去焦点(`blur`)、回车(`keydown`,检测`event.keyCode === 13`)等事件,捕获用户输入。 3. 保存更改:当编辑...
3. **启用可编辑功能**:为了使表格中的单元格变为可编辑,我们需要为每个需要编辑的单元格添加`data-x-editable`属性,并指定编辑类型。例如,对于文本编辑,可以设置`data-x-editable="true"`,对于日期编辑,可以...
不一样的table(可编辑状态table)”时,这意味着我们正在讨论一个与传统静态表格有所不同的动态表格。 在描述中,作者指出,当鼠标点击表格中的某个数据单元格时,该单元格会转变为可编辑状态,允许用户直接修改其中...
var newRow = $("<tr><td>新姓名</td><td>新年龄</td><td>编辑</button> 删除</button></td></tr>"); $("#dataTable tbody").append(newRow); }); ``` 这里,我们假设有一个id为`addRow`的按钮触发添加行的操作。...