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可编辑的方法详解,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
补充知识:React+Ant Design实现可编辑单元格、添加行并利用form获取新增数据 实现如下图所示需求: 实现功能说明: 点击添加按钮,在表格中添加新的空白行(如下图所示),在点击提交的时候获取空白行的数据 在...
本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考,具体如下: html部分: <table> ;>序号 班次 分组 操作 <td width=40px;>{{value.id }}</td> <td...
改版uni-table插件功能,新增单击行事件、单击某td事件、单独修改某td的字体颜色;选中行样式修改。主要修改文件uni-tr、uni-td;
本文实例为大家分享了bootstrap table双击可编辑的具体代码,供大家参考,具体内容如下 html: <table class=table id=para_table> 名称 值 操作 <td style=tex
主要为大家详细介绍了vue el-table实现行内编辑功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,... 一款简洁实用的自适应PC手机端的jQuery可编辑表格代码,jQuery表格添加删除行数据代码,使用起来十分的方便。
<table name=info><tr><td>lily<span>okok</span></td></tr><tr><td>18</td></tr><tr xss=removed><td>hahhha</td></tr></table> <table name=info><tr><td>tom</td></tr><tr><td>22</td></tr><
<table class="table table-bordered table-hover"> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>电话</td> <td>操作</td> <td colspan="5" class="danger">增加</button></td> </table>
基本功能都已实现,本人能力有限,比不上layui数据表格样式的完善,所以我其实有点遗憾,如果有哪位大神,能让table的表头固定在最上面一行,并且能让 删除功能的 td一直停靠在table的最右边 说白了就是类似 layui...
原生javascript表格插件,可以拖动改变大小,合并单元格等 Demo 安装 npm install npm run dev ...t.CreateFromString('<table><tr><td></td><td></td></tr><tr><td></td><td></td></tr></table>',document.bo
//以下两个方法可以使表格不可编辑区域也能进行复制,在td标签上加上class="copy-td" $(".copy-td").mousedown(function(){ console.log('鼠标按下,解绑') that.selectableVaribal.unBangdingSelectable(); // ...
本文实例讲述了JavaScript控制table某列不显示的方法。分享给大家供大家参考。具体实现方法如下: 1、table代码 代码如下:<table id=”mytable” border=”0″ width=”1400″ align=”center” ...td width=
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs ...
在页面上生成多表格(可编辑),像excel可以删除表格行列,兼容ie表格编辑的问题,但是在其他浏览器上会有点不美观,如果想要美观点可以将插件中的 1 标签去掉,将contenteditable='true'属性加到div父类td中,...
昨天已经成功添加了一行,今天希望所添加的一行可以进行单元格编辑。... " <td data-field='domainId' data-edit='text'> <div class='layui-table-cell laytable-cell-1-domainId '>11 </div></td
而可编辑的单元格实际上是在选中单元格时,在单元格上面添加个input输入域,动态的更新数据源代码: HTML代码: 代码如下: <table class=”editableTable”> <thead> <tr> <th>Item1</th> <th>Item2</th> <th>Item3...
本文实例为大家分享了jQuery实现可编辑表格的具体代码,供大家参考,具体内容如下 我们最终要达到的效果如下: 当单击学号列的时候,可以进行编辑: 当单击ESC的时候,操作取消,当单击回车的时候,修改生效(没有...