contenteditable改变编辑后的背景颜色

Question

我想建立一个类似电子表格的应用程序，并使用表<td>与标签contenteditable = "true"，我希望单元格的背景颜色在改变后被改变。

从我的研究中我发现我需要javascript或jquery才能做到这一点，但我对此知之甚少。我从哪说起呢？到目前为止，我已经想出了如何在编辑为时更改颜色。谢谢！

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

Answer 1

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

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

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

https://jsfiddle.net/kasyzytr/

Answer 2

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

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>

这里是发挥了小提琴：https://jsfiddle.net/8zbrxwpz/