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

Question

我在这个问题上停留了一段时间：我想制作一种 excel 电子表格（好吧，只是 table 的几列），但我'我无法设置新值。

这是（未）工作的 fiddle。

步骤：

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

旧值仍然存在...我不知道为什么会这样，我以为我必须用 clone() 来处理这个问题，但结果是一样的。

注意：我必须这样做，因为我不想 overwrite/lose €、%、£ 符号。我想这也可以用 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>

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

Can't replace value in table cell with inline jquery editing

jquery

inline