单击时将表格单元格从跨度更改为输入 [英] Change table cell from span to input on click
本文介绍了单击时将表格单元格从跨度更改为输入的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试将表格单元格从'span'类型更改为'input'，然后单击，然后返回到'span'on blur，但它不能正常工作：
I am trying to change the table cell from 'span' type to 'input' on click and then back to 'span' on blur but it isn't working as given in here:
这里是javascript代码：
here is the javascript code:
<script type="text/javascript">
$(document).ready(function() {
$('#assets').click(function () {
$('tr td:nth-child(3)').each(function () {
var html = $(this).html();
var input = $('<input type="text" />');
input.val(html);
$(this).html(input);
});
});
});
</script>
这里是文件正文
<body>
<div id="content">
<table id="assets">
<tr>
<td class="asset_name"><span>Name</span></td>
<td class="asset_value"><span>ast1</span></td>
<td class="asset_name"><span>Location</span></td>
<td class="asset_value"><span>Loc-1</span></td>
</tr>
<tr>
<td class="asset_name"><span>Name</span></td>
<td class="asset_value"><span>ast2</span></td>
<td class="asset_name"><span>Location</span></td>
<td class="asset_value"><span>Loc-2</span></td>
</tr>
</table>
</div>
</body>
使用jQuery 1.7.2
using jQuery 1.7.2
什么是错了吗？请帮忙！
What's wrong here ? Please help !
谢谢!!
更新：只需要更改class ='asset_value'的单元格并且一次只有一个细胞不是全部。此外，它应该变回模糊的范围..
Update: only need to change the cells with class='asset_value' and only one cell at a time not all. Also, it should change back to span on blur..
推荐答案
试试这个：
$(document).ready(function() {
$('#assets').on('click', 'span', function() {
var $e = $(this).parent();
if($e.attr('class') === 'asset_value') {
var val = $(this).html();
$e.html('<input type="text" value="'+val+'" />');
var $newE = $e.find('input');
$newE.focus();
}
$newE.on('blur', function() {
$(this).parent().html('<span>'+$(this).val()+'</span>');
});
});
});
这将在点击时更改单个单元格，并在模糊时恢复为跨度。
this will change single cell on click and revert back to span on blur.
这篇关于单击时将表格单元格从跨度更改为输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
