我试图在点击时将表格单元格从“span”类型更改为“input”，然后在模糊时返回“span”，但它无法按照此处给出的方式工作:
Convert table cells to text-boxes with JQuery
这是 JavaScript 代码:
<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
这里出了什么问题？请帮忙!
谢谢!!
更新:只需更改 class='asset_value' 的单元格，并且一次仅更改一个单元格，而不是全部。另外，它应该在模糊时变回跨度..
最佳答案
试试这个:
$(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>');
});
});
});
这将在单击时更改单个单元格并在模糊时恢复为跨度。
关于javascript - 单击时将表格单元格从跨度更改为输入，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11882693/