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


Posted in Javascript onFebruary 21, 2019

本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考,具体如下:

html部分:

<table>
  <thead>
  <tr >
   <th width="40px;">序号</th>
   <th>班次</th>
   <th>分组</th>
   <th>操作</th>
  </tr>
  </thead>
  <tbody>
  <tr ng-repeat="value in train_list" >
   <td width="40px;">{{value.id }}</td>
   <td>{{value.trainNumber}}</td>
   <td ng-click="edit($event)">{{value.groupId}}</td>
   <td>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"  ng-click="move($event,'up')">上移</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"  ng-click="move($event,'down')">下移</a>
    <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow"  ng-click="del($event)">删除</a>
   </td>
  </tr>
  </tbody>
</table>

js部分:

/**
 * 单元格单击变编辑
 * @param e
 */
$scope.edit=function(e){
  var td = $(e.target);
  var txt = td.text();
  var input = $("<input type='text' value='" + txt + "' style='width:82px;height:26px;'/>");
  td.html(input);
  input.click(function() { return false; });
  //获取焦点
  input.trigger("focus");
  //文本框失去焦点后提交内容,重新变为文本
  input.blur(function() {
    var newtxt = $(this).val();
     //判断文本有没有修改
    if (newtxt != txt) {
      td.html(newtxt);
    }
    else
    {
      td.html(newtxt);
    }
  });
};

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
基于jquery的模态div层弹出效果
Aug 21 Javascript
JavaScript中的几个关键概念的理解-原型链的构建
May 12 Javascript
JS正则验证邮箱的格式详细介绍
Nov 19 Javascript
如何获取网站icon有哪些可行的方法
Jun 05 Javascript
详细解读AngularJS中的表单验证编程
Jun 19 Javascript
JavaScript简单拖拽效果(1)
May 17 Javascript
详解vue服务端渲染(SSR)初探
Jun 19 Javascript
vue 引用自定义ttf、otf、在线字体的方法
May 09 Javascript
webpack项目使用eslint建立代码规范实现
May 16 Javascript
jQuery创建折叠式菜单
Jun 15 jQuery
使用apifm-wxapi模块中的问题及解决方法
Aug 05 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
Vue实现table上下移动功能示例
Feb 21 #Javascript
JavaScript数组、json对象、eval()函数用法实例分析
Feb 21 #Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 #Javascript
ES6基础之展开语法(Spread syntax)
Feb 21 #Javascript
ES6基础之默认参数值
Feb 21 #Javascript
微信小程序HTTP接口请求封装的实现
Feb 21 #Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 #Javascript
You might like
php邮件发送,php发送邮件的类
2011/03/24 PHP
Laravel框架下载,安装及路由操作图文详解
2019/12/04 PHP
javascript 隔行换色函数代码
2010/10/24 Javascript
非html5实现js版弹球游戏示例代码
2013/09/22 Javascript
js文件Cookie存取值示例代码
2014/02/20 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
jQuery通过扩展实现抖动效果的方法
2015/03/11 Javascript
深入了解JavaScript中的Symbol的使用方法
2015/07/28 Javascript
jquery判断密码强度的验证代码
2020/04/22 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
jQuery打字效果实现方法(附demo源码下载)
2015/12/18 Javascript
jQuery+css实现的切换图片功能代码
2016/01/27 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
Javascript中的数组常用方法解析
2016/06/17 Javascript
javascript基于牛顿迭代法实现求浮点数的平方根【递归原理】
2017/09/28 Javascript
AngularJS实现的获取焦点及失去焦点时的表单验证功能示例
2017/10/25 Javascript
详解AngularJS之$window窗口对象
2018/01/17 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
koa+mongoose实现简单增删改查接口的示例代码
2019/05/13 Javascript
解决elementui表格操作列自适应列宽
2020/12/28 Javascript
详解详解Python中writelines()方法的使用
2015/05/25 Python
Python中的二维数组实例(list与numpy.array)
2018/04/13 Python
python队列queue模块详解
2018/04/27 Python
详解Django中CBV(Class Base Views)模型源码分析
2019/02/25 Python
谈谈Python中的while循环语句
2019/03/10 Python
Python unittest单元测试框架实现参数化
2020/04/29 Python
Python API 操作Hadoop hdfs详解
2020/06/06 Python
html5利用canvas绘画二级树形结构图的示例
2017/09/27 HTML / CSS
智能钱包:Ekster
2019/11/21 全球购物
工商管理实习生自我鉴定范文
2013/12/18 职场文书
《七颗钻石》教学反思
2014/02/28 职场文书
保密工作整改情况汇报
2014/11/06 职场文书
2014年话务员工作总结
2014/11/19 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
答谢酒会主持词
2015/07/02 职场文书
2016孝老爱亲模范事迹材料
2016/02/26 职场文书