单击时将表格单元格从跨度更改为输入
单击时将表格单元格从跨度更改为输入
提问于 2012-08-09 19:44:28
我试图在单击时将表格单元格从'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‘的单元格，并且一次只更改一个单元格，而不是全部。另外，它应该会变回模糊时的跨度。
回答 5
Stack Overflow用户
回答已采纳
发布于 2012-08-09 20:12:50
试试这个：
$(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>');
});
});
});这将在单击时更改单个单元格，并恢复为模糊时的跨度。
Stack Overflow用户
发布于 2012-08-09 19:48:09
您可以使用replaceWith()方法，html()方法清空所选元素并将html标记附加到该元素，尝试以下操作：
$(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).replaceWith(input);
});
});
});DEMO
当replaceWith方法更改标记的结构时，您应该为生成的标记委托事件，您可以使用on方法，请尝试以下操作：
$(document).ready(function() {
$(document).on('click', '#assets td', function () {
var html = $(this).text()
var input = $('<input type="text" />');
input.val(html);
$(this).replaceWith(input);
$('#assets input').focus();
});
$(document).on('blur', '#assets input', function(){
$(this).replaceWith('<td class="asset_value"><span>'+this.value+'</span></td>')
})
});DEMO
Stack Overflow用户
发布于 2012-08-09 20:01:13
希望这能对你有所帮助：http://jsfiddle.net/RBGME/19/
HTML：
<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>示例CSS：
td { border: 1px solid #aaa; height: 30px; text-align: center; width: 100px; }
input, input:hover, input:focus { width: 100px; height: 30px; box-sizing: border-box; outline: none; background-color: #eee; }jQuery：
$(document).ready(function() {
$('#assets tr td:nth-child(3)').click(function () {
var html = $(this).html();
var input = $('<input type="text" />');
input.val(html);
$(this).replaceWith(input);
});
});?页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/11882693
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号