无法使用内联jquery编辑替换表格单元格中的值

Question

有一段时间我一直坚持这个问题：我想制作一种excel电子表格（好吧，只是表格的几列），但是我无法设置新价值。

这是（不）工作fiddle。

步骤：

• 双击黄色单元格
• 填写新值
• 模糊或按回车键

旧的价值仍然存在......我不知道为什么会发生这种情况，我认为我必须用clone()来解决这个问题，但结果是一样的。

注意：我必须这样做，因为我不想覆盖/丢失€，%，£标志。我想这也可以用css来实现，但我不知道怎么做

Answer 1

除了将所有内容放入$td时出现一个小错误外，你几乎把它弄好了。

替换此代码：

$(prev_html).find('span').text( new_val );
$td.html( prev_html );

有了这个：

$td.html(prev_html);
$td.find('span').text(new_val);

执行$(prev_html)基于prev_html在内存中创建DOM对象，然后操作这些DOM对象。但这并没有改变prev_html，这正是你所期望的。

我所做的是将prev_html放回$td（第一个新行），然后操纵$td（第二个新行< / em>的）。

查看新的Fiddle。

并作为片段：

＆＃13;

＆＃13;

$('.can-edit-this').on('dblclick', function(){
	var $td = $(this).closest('td');
	$td.addClass('editing');
	prev_html = $td.html();
	
	var $input = $('<input class="form-control" type="text" id="can-edit-this-field" name="" value="'+$(prev_html).text()+'" style="table-layout: fixed;" />');
	
	$td.html($input);
	$input.focus();
	
	$input.on('blur', function(){
		var new_val = $(this).val();
		$td.html(prev_html);
    $td.find('span').text( new_val );
		$td.removeClass('editing');
		prev_html='';
	});
	
	$input.on('keypress', function(e){
		if(e.which == 13){
			$(this).trigger('blur');
		}
	});
});

＆＃13;

table td {width: 50px !important}
.can-edit-this {background-color: #fcefa1;}
.can-edit-this.editing {padding:0 !important}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-bordered">
<tbody>
  <tr>
    <td>Row 1</td>
    <td class="can-edit-this"><span>123</span>€</td>
    <td class="can-edit-this"><span>234</span>%</td>
    <td class="can-edit-this"><span>345</span>£</td>
    <td></td>
  </tr>
  <tr>
    <td>Row 2</td>
    <td class="can-edit-this"><span>123</span>€</td>
    <td class="can-edit-this"><span>234</span>%</td>
    <td class="can-edit-this"><span>345</span>£</td>
    <td></td>
  </tr>
  <tr>
    <td>Row 3</td>
    <td class="can-edit-this"><span>123</span>€</td>
    <td class="can-edit-this"><span>234</span>%</td>
    <td class="can-edit-this"><span>345</span>£</td>
    <td></td>
  </tr>
  <tr>
    <td>Row 4</td>
    <td class="can-edit-this"><span>123</span>€</td>
    <td class="can-edit-this"><span>234</span>%</td>
    <td class="can-edit-this"><span>345</span>£</td>
    <td></td>
  </tr>
  <tr>
    <td>Row 5</td>
    <td class="can-edit-this"><span>123</span>€</td>
    <td class="can-edit-this"><span>234</span>%</td>
    <td class="can-edit-this"><span>345</span>£</td>
    <td></td>
  </tr>
</tbody>
</table>

＆＃13;

＆＃13;

＆＃13;