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

html部分：

<table>  <thead>  <tr >   <th width="40px;">序號(hào)</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; });  //獲取焦點(diǎn)  input.trigger("focus");  //文本框失去焦點(diǎn)后提交內(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入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》

希望本文所述對(duì)大家AngularJS程序設(shè)計(jì)有所幫助。