javascript - contenteditable 编辑后更改背景颜色

Question

我正在尝试构建一个类似电子表格的应用程序并使用表格 <td>带有标签contenteditable = "true"我希望单元格的背景颜色在更改后也能更改。

根据我的研究，我认为我需要 javascript 或 jquery 来做到这一点，但我对此知之甚少。我从哪说起呢？到目前为止，我已经弄清楚如何在编辑单元格时更改颜色。谢谢!

<td contenteditable="true" >
  <style>
     [contenteditable="true"]:focus {
       background-color: yellow;
     }
  </style>
  "Stuff"
</td>

Answer 1

所以我看到您想出了如何在编辑单元格时更改颜色。现在，要在单元格编辑完成后更改单元格，您可以使用以下示例。

jQuery 有一个名为 focusout 的函数当元素失去用户焦点时触发。然后它将添加类orange，它将背景更改为橙色。

$( document ).ready(function() {
  $("td").focusout(function(){
      $(this).addClass("orange");
  });
});

td[contenteditable="true"]:focus {
    background-color: yellow;
}

.orange{
  background-color: orange;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<table>
  <td contenteditable="true" >"Stuff"</td>
</table>

这是一个可以玩的 fiddle :https://jsfiddle.net/8zbrxwpz/