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/