angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例

更新時間：2019年02月21日 11:49:46 作者：小貓兒

這篇文章主要介紹了angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài),涉及AngularJS事件響應及頁面table元素屬性動態(tài)操作相關(guān)實現(xiàn)技巧,需要的朋友可以參考下

本文實例講述了angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)。分享給大家供大家參考，具體如下：

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");
  //文本框失去焦點后提交內(nèi)容，重新變?yōu)槲谋?
  input.blur(function() {
    var newtxt = $(this).val();
     //判斷文本有沒有修改
    if (newtxt != txt) {
      td.html(newtxt);
    }
    else
    {
      td.html(newtxt);
    }
  });
};

更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對大家AngularJS程序設計有所幫助。

您可能感興趣的文章:

相關(guān)文章

如何用DevUI搭建自己的Angular組件庫
DevUI 是一款面向企業(yè)中后臺產(chǎn)品的開源前端解決方案，它倡導沉浸、靈活、至簡的設計價值觀，提倡設計者為真實的需求服務，為多數(shù)人的設計，拒絕嘩眾取寵、取悅眼球的設計。如果你正在開發(fā) ToB 的工具類產(chǎn)品，DevUI 將是一個很不錯的選擇！
2021-05-05
AngularJS基礎學習筆記之控制器
在AngularJS中，控制器是一個Javascript函數(shù)（類型/類），用來增強除了根作用域意外的作用域?qū)嵗?。當你或者AngularJS本身通過<code>scope.$new</code>倆創(chuàng)建一個新的子作用域?qū)ο髸r，有一個選項能讓你將它當做參數(shù)傳遞給控制器。
2015-05-05
angular 用Observable實現(xiàn)異步調(diào)用的方法
這篇文章主要介紹了angular 用Observable實現(xiàn)異步調(diào)用的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
基于AngularJS的拖拽文件上傳的實例代碼
本篇文章主要介紹了基于AngularJS的拖拽上傳的實例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
AngularJS實現(xiàn)表單驗證功能詳解
這篇文章主要為大家詳細介紹了AngularJS實現(xiàn)表單驗證功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2017-10-10
Angular 4.X開發(fā)實踐中的踩坑小結(jié)
這篇文章主要給大家介紹了關(guān)于Angular 4.X開發(fā)實踐中的一些踩坑經(jīng)驗，文中主要介紹的是使用ngIf或者ngSwitch出錯以及多級依賴注入器的相關(guān)內(nèi)容，需要的朋友可以參考借鑒，下面來一起看看吧。
2017-07-07
angular中的http攔截器Interceptors的實現(xiàn)
本篇文章主要介紹了angular中的http攔截器Interceptors的實現(xiàn)的相關(guān)資料,具有一定的參考價值，感興趣的小伙伴們可以參考一下。
2017-02-02
AngulerJS學習之按需動態(tài)加載文件
本篇文章主要介紹了AngulerJS學習之按需動態(tài)加載文件，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-02-02
@angular前端項目代碼優(yōu)化之構(gòu)建Api Tree的方法
這篇文章主要介紹了@angular前端項目代碼優(yōu)化之構(gòu)建Api Tree的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-12-12
Angular2 之路由與導航詳細介紹
本篇文章主要介紹了Angular2 之路由與導航詳細介紹，詳細的介紹了路由的用法，具有一定的參考價值，有興趣的可以了解一下
2017-05-05