春天到了，各种绚丽的花朵都开放了，金黄的油菜花，成了蝴蝶的天地，美丽的蝴蝶在金黄色的舞台上跳着柔和而优美的舞姿。它们一会儿在空中飞舞，一会儿静静地停留在油菜花上。给春天增添了不少乐趣。油菜花的美丽，同时也吸引了不少 "劳动人民 "——蜜蜂，它们总是不分昼夜地不辞辛劳地给油菜花授粉。偶尔一阵微风吹来，金黄的油菜花立刻涌起了高低起伏的 "金浪花 "。远远望去，真是美不胜收！
本文实例讲述了angularjs实现table表格td单元格单击变输入框/可编辑状态。分享给大家供大家参考，具体如下：
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 rel="nofollow noopener noreferrer" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ng-click="move($event,'up')">上移</a>
<a rel="nofollow noopener noreferrer" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" ng-click="move($event,'down')">下移</a>
<a rel="nofollow noopener noreferrer" 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");
//文本框失去焦点后提交内容，重新变为文本
input.blur(function() {
var newtxt = $(this).val();
//判断文本有没有修改
if (newtxt != txt) {
td.html(newtxt);
}
else
{
td.html(newtxt);
}
});
};
希望本文所述对大家AngularJS程序设计有所帮助。
以上就是angularjs实现table表格td单元格单击变输入框/可编辑状态示例。人生如白驹过隙死不足恨但夙心往志，不闻于末世矣。更多关于angularjs实现table表格td单元格单击变输入框/可编辑状态示例请关注haodaima.com其它相关文章！
