编辑后满足变化的背景颜色

Question

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

根据我的研究，我认为我需要javascript或jquery这样做，但我知之甚少。我从哪里开始？到目前为止，我已经想到了如何在 编辑单元格时更改颜色。谢谢！

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

Answer 1

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

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

＆＃13;

＆＃13;

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

＆＃13;

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

.orange{
  background-color: orange;
}

＆＃13;

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

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

＆＃13;

＆＃13;

＆＃13;

这是一个小提琴：https://jsfiddle.net/8zbrxwpz/

Answer 2

使用td[contenteditable="true"]选择器，并添加表父级。

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

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

https://jsfiddle.net/kasyzytr/