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

<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>

/** * 单元格单击变编辑 * @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);    }  });};