angularjs table td单元格单击变输入框 可编辑状态
2018-03-06 17:59
477 查看
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="#" ng-click="move($event,'up')">上移</a>
<a href="#" ng-click="move($event,'down')">下移</a>
<a href="#" 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);
}
});
};
相关文章推荐
- ios 让UITextField(输入框)直接进入编辑状态
- [Easyui TreeGrid]多行选中可编辑,再次单击退出编辑状态
- input文本输入框所有用法 文字显示 点击选框编辑 文本框变色 只能输入中文、英文、数字 只读状态 不能黏贴
- Flex中如何给DataGrid控件的项目添加一个可编辑TextArea/TextInput,单击控件内的项目时,自动进入编辑状态
- 单击、双击div进入编辑状态
- Flex中如何给DataGrid控件的项目添加一个可编辑TextArea/TextInput,单击控件内的项目时,自动进入编辑状态
- esayui 编辑单元格 双击编辑一个单元格,不是一行,单击其他后,关闭编辑状态,单击双击编辑可以任意调整
- table单击进入编辑状态、失去焦点发送数据到后台
- DNN单击事件只有在"编辑"状态下才有效的解决方案
- TcxTreeList单元格单击第一次选中,第二次编辑的状态(转)
- UltraWebGrid 单击单元格进入编辑状态
- DNN单击事件只有在"编辑"状态下才有效的解决方案
- UITableView实现选择框和编辑状态时cell向右移动的自定义方法
- easyui datagrid editor在编辑状态下更新列值并不结束编辑。
- 当用户点击编辑按钮时input变成可编辑状态
- 在DBGrid中可选中行而又可进入编辑状态
- Qt中 QTableWidgetItem设置编辑状态小技巧
- 设置编辑(iPhone/iPad开发)设置UITextView为不可编辑状态
- 关于DataGridView中如何接收处于编辑状态下的当前信息-打击我做程序员的信心呀!
- 想要单击datagrid的上的某个单元格,就可以编辑,