angularjs實現(xiàn)table表格td單元格單擊變輸入框/可編輯狀態(tài)示例
本文實例講述了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); } }); };
更多關于AngularJS相關內(nèi)容感興趣的讀者可查看本站專題:《AngularJS指令操作技巧總結》、《AngularJS入門與進階教程》及《AngularJS MVC架構總結》
希望本文所述對大家AngularJS程序設計有所幫助。
相關文章
使用Angular material主題定義自己的組件庫的配色體系
這篇文章主要介紹了使用Angular material主題定義自己的組件庫的配色體系的相關知識,本文給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下2019-09-09angularjs封裝bootstrap時間插件datetimepicker
這篇文章主要介紹了angularjs封裝bootstrap時間插件datetimepicker 的相關資料,需要的朋友可以參考下2016-06-06AngularJS實現(xiàn)動態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實現(xiàn)動態(tài)編譯添加到dom中的方法,結合實例形式分析了AngularJS動態(tài)編輯構建模板的相關操作技巧,需要的朋友可以參考下2016-11-11深入淺析angular和vue還有jquery的區(qū)別
vue是一個漸進式的框架, 是一個輕量級的框架而angular是一個mvc框架, 各有千秋,下面小編通過本文給大家介紹angular和vue還有jquery的區(qū)別,感興趣的朋友一起看看吧2018-08-08Angular統(tǒng)一注入器unified injector簡化依賴關系管理
這篇文章主要為大家介紹了Angular統(tǒng)一注入器unified injector簡化依賴關系管理的使用方法實例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-10-10Angular.js中ng-include用法及多標簽頁面的實現(xiàn)方式詳解
這篇文章主要給大家介紹了在Angular.js中ng-include用法及多標簽頁面的實現(xiàn)方式的相關資料,文中通過示例代碼介紹的非常詳細,相信對大家具有一定的參考學習價值,需要的朋友們下面隨著小編一起來學習學習吧。2017-05-05