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

Question

一段时间以来，我一直在这个问题上停留：我想制作一种excel电子表格（很好，一个表中只有几列），但是我无法设置新值。

这是（不是）工作的小提琴 。

脚步：

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

旧值仍然存在...我不知道为什么会这样，我以为我必须使用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 （ 第二行 ）进行操作。

看到新的小提琴 。

作为摘要：

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