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

