We Keep Coding

contenteditable change background color after edit

I am trying to build a spreadsheet-like application and using a table <td> with a tag contenteditable = "true" and I want the background color of the cell to be changed after it was changed.
From my research I figured I would need javascript or jquery to do so, however I know very little of it. Where do I start? So far I have figured how to change color when the cell is being edited. thank you!
<td contenteditable="true" >
<style>
[contenteditable="true"]:focus {
background-color: yellow;
}
</style>
"Stuff"
</td>

So I see you figured out how to change color when the cell is being edited. Now to change the cell after its done being edited you can use the following example.
jQuery has a function called focusout which triggers when the element loses focus from the user. It will then add the class orange which will change the background to 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>
Here is a fiddle to play with: https://jsfiddle.net/8zbrxwpz/

Use td[contenteditable="true"] selector, and add the table parent as well.
td[contenteditable="true"]:focus {
background-color: yellow;
}
<table>
<td contenteditable="true" >"Stuff"</td>
</table>
https://jsfiddle.net/kasyzytr/

Color table row based on column value

I have an html table and I want to color the rows based on the value in the first column of that row. If the value is "CONFIRMED" I want to color the row green, and if it is "UNCONFIRMED" I want to color the row red.
The JS I am using to do this is:
$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
if (col_val == "CONFIRMED"){
$(this).addClass('selected'); //the selected class colors the row green//
} else {
$(this).addClass('bad');
}
});
});
The CSS looks like this:
.selected {
background-color: green;
color: #FFF;
}
.bad {
background-color: red;
color: #FFF;
}
The html table is generated from a pandas dataframe in my Django view and passed in like this:
<div class="table-responsive" style="margin-left: 15%; margin-right: 15%; overflow:auto;">
{{ datatable | safe }}
</div>
The problem is that it's coloring all of my rows red. Can anyone tell me what I'm doing wrong?

Since you use ==="CONFIRMED" make sure it's really: UPPERCASE, and that there's no leading or ending spaces " CONFIRMED" or "CONFIRMED " in the HTML.
The code you're showing will color .selected the entire row whos :eq(1) TD has the "CONFIRMED" content:
$(function(){
$("tr").each(function(){
var col_val = $(this).find("td:eq(1)").text();
if (col_val == "CONFIRMED"){
$(this).addClass('selected'); //the selected class colors the row green//
} else {
$(this).addClass('bad');
}
});
});
.selected{
background-color:green;
}
.bad{
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>1</td><td>CONFIRMED</td>
</tr>
<tr>
<td>2</td><td>UNCONFIRMED</td>
</tr>
</table>
nothing bad about it.
if that's not what you see on your screen note that :eq() is index based, and elements index start at 0 so :eq(0) is probably what you want?
Another probable thing is that you don't have the exact content string set as "CONFIRMED" but probably there's some spaces before or after - so make sure to trim them using $.trim()
if( $.trim(col_val) === "CONFIRMED" )
if you additionally want to make your code even more flexible about the UPPERCASE or Capitalization you can do as:
if( $.trim(col_val.toLowerCase() ) === "confirmed" )
// Will work on "CONFIRMED", "Confirmed", "conFIRMed" etc

<style>
tr[data-stat="confirmed"]{
background-color: green;
color: #fff;
}
tr[data-stat="unconfirmed"]{
background-color: red;
color: #fff;
}
</style>
<table>
<tr data-stat="confirmed">
<td>1</td>
<td>Confirmed</td>
<td>bla.. bla.. bla..</td>
</tr>
<tr data-stat="unconfirmed">
<td>2</td>
<td>Not Confirmed</td>
<td>bla.. bla.. bla..</td>
</tr>
</table>

To find the first column in a row, you want to use the first-child selector. You can iterate over every first column with the each function.
We then look at the text and then add the appropriate class to the column's parent (tr).
$(document).ready(function() {
$("td:first-child").each(function() {
if ($(this).text() === "Confirmed") {
$(this).parent().addClass("green");
}
else {
$(this).parent().addClass("red");
}
});
});
http://jsfiddle.net/cw43ejjf/

If you are looking for the first column in the row you want to use:
var col_val = $(this).find("td:eq(0)").text();
Change the td:eq(1) to td:eq(0)

Change Div Class On Each Click

I am building Bootstrap HTML and PHP website. Basically I need a solution so that when a div is clicked on it changes color and adds some text.
I can do this however I need a solution so that it can be done 3 times, bronze, silver and gold in this instance.
Below is my JSFiddle which shows it working, it changes to bronze and inserts the text as it should however the second click will not work and the third click won't work.
https://jsfiddle.net/vvecu9qa/1/
Hope that makes sense,
Thanks in advance guys!
HTML
<table class="table table-bordered">
<tbody>
<tr>
<td>Name</td>
<td>Spin on a variety of body parts</td>
<td>Spin with control and body tension</td>
<td>Spin in a variety of shapes</td>
<td>Identify appropriate places to perform a spin</td>
</tr>
<tr>
<td>Jon Smith</td>
<td class="progress1"> </td>
<td class="progress2"> </td>
<td class="progress3"> </td>
<td class="progress4"> </td>
</tr>
</tbody>
CSS
.emerging {
background-color: #cd7f32;
color: #fff;
text-align: center;
}
.expected {
background-color: #c0c0c0;
color: #fff;
text-align: center;
}
.exceeding {
background-color: #ffd700;
color: #fff;
text-align: center;
}
JavaScript
$('.progress1').click(function(){
$(".progress1").removeClass("progress1");
$(this).addClass('emerging');
$(this).text('Emerging');
});
$('.emerging').click(function(){
$(".emerging").removeClass("emerging");
$(this).addClass('expected');
$(this).text('Expected');
});
$('.expected').click(function(){
$(".expected").removeClass("expected");
$(this).addClass('exceeding');
$(this).text('Exceeding');
});

change your script like this, it will work
$(document).on("click",'.progress1',function(){
$(".progress1").removeClass("progress1");
$(this).addClass('emerging');
$(this).text('Emerging');
});
$(document).on("click",'.emerging',function(){
$(".emerging").removeClass("emerging");
$(this).addClass('expected');
$(this).text('Expected');
});
$(document).on("click",'.expected',function(){
$(".expected").removeClass("expected");
$(this).addClass('exceeding');
$(this).text('Exceeding');
});
here is the updated fiddle link

Since you only have 3 scenarios, your approach is fine. However, a more intuitive approach would be to create an array and an index, then cycle through them. This way you would only need one click event instead of 1 per step.
Updated Fiddle Here
var classes = ['emerging', 'expected', 'exceeding'];
var index = 0;
$('.progress1').click(function(){
$(this).removeClass(); //Removes all classes
$(this).addClass(classes[index]);
$(this).text(classes[index]);
if(index == (classes.length - 1)) {
index = 0; //Reset index at end of array
} else {
index++; //Increment index if not at the end of array
}
});

Try this approach. I have used the data attribute to make it a bit cleaner.
https://jsfiddle.net/mvinayakam/m4q3rgrq/
<td class="progress" data-progress="base" ><span> <span></td>
The Javascript part
$('.progress').click(function(){
progressAttr=this.getAttribute('data-progress');
switch (progressAttr)
{
case "base":
this.setAttribute('data-progress',"emerging");
break;
case "emerging":
this.setAttribute('data-progress',"exceeding");
break;
}
});
The CSS
[data-progress="emerging"] {
/* Styles */
background-color: #cd7f32;
color: #fff;
text-align: center;
}
[data-progress="emerging"]:after {
content:"Emerging";
}

How to change the background colour of a progress bar [duplicate]

This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
How to change the color of a progress bar
I have done a simple progress bar, but i dont know how to change the background color of the bar, the percentage color and the text " Last updated " colour .. Is there a code that should be introduced ? Please help me with some code/demo examples . Thanks
HTML:
<table>
<tr>
<td>Last updated 1/4/2013:</td>
<td><div class="progress" data-value="0"><span>0%</span></div></td>
</tr>
CSS:
.progress.ui-progressbar {position:relative;height:2em;}
.progress span {position:static;margin-top:-2em;text-align:center;display:block;line-height:2em;padding-left:200px;padding-right:200px;}
.progress[aria-valuenow="0"]
span {margin-top:0px;}​
JavaScript:
$(document).ready(function() {
$(".progress").each(function() {
var progressValue = $(this).data("value");
$(this).progressbar({
value: progressValue
}).children("span").appendTo(this);
});
});​

To change the background color of the percentage bar add this CSS rule:
.progress {
color: red;
}
For the text color:
I would recommend first adding an <h1> tag around the title so it looks like this:
<td><h1>Last updated 1/4/2013:</h1></td>
Then add this CSS rule:
td h1 {
color: red;
}
And to change the percentage color add this rule:
.progress span {
color: blue;
}
Also, close your <table> tag.

Cell colors changes on mouse-hover without effecting the text color

I want a table which each cell have different colours, which on mouse hover changes to a particular colour specified, without effecting the colour of text. Is it possible without JavaScript?
My simple table with three cell with different colours are
<table>
<tr>
<td bgcolor="red">Red</td>
<td bgcolor="blue">Blue</td>
<td bgcolor="green">Green</td>
</tr>
</table>
Rederring the text colour should have no effect on any of the cell. I want this with simple scripting.

Something like this:
<style type="text/css">
.td_hover { background-color: white; }
.td_hover:hover { background-color: yellow; }
.bg_red { background-color: red; }
.bg_blue { background-color: blue; }
.bg_green { background-color: green; }
</style>
<table>
<tr>
<td class="td_hover bg_red">Red</td>
<td class="td_hover bg_blue">Blue</td>
<td class="td_hover bg_greed">Green</td>
</tr>
</table>

Yes, by using CSS instead of decade-old bgcolor attributes.

add a class (for my example "tablecell"), and remove bgcolor.
CSS-way:
.tablecell:hover {
background-color:#000000; // Put color you want it to be on hover here.
}
.tablecell {
background-color:#FF0000; // Put color you wan tit to be on not-hover here (optional)
}
Javascript-way:
myElement.addEventListener("onmouseover", mouseIn);
myElement.addEventListener("onmouseout", mouseOut);
function mouseIn() {
this.style.backgroundColor = "#000000";
}
function mouseOut() {
this.style.backgroundColor = "#FF0000";
}
jQuery way:
$(".tablecell").on("hover", mouseIn, mouseOut); // functions above