无法使用内联 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（第二个新行）。

查看新的Fiddle。

作为一个片段：

$('.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');
		}
	});
});

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

<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>