Hi I would like to ask if it is possible to maintain the changes from a function after the whole website refreshes. So far I found a code for changing background color of a span who has a value. But then since it is onclick, the background color changes back to original as the page refreshes.
$('#submit').click(function(){
$('td span').each(function(index){
if( $(this).text().length !== 0 ){
$(this).parent().css('background-color', 'yellow');
}
});
});
Is there a way to maintain the changes even after the page refreshes or is there another way to do it? A listener maybe or a checker in which the site will be checked first whether the span has value or not. Also instead of making the parent's background color change I want the column on the opposite to change. The one without a value. Will it be possible? Javascript or Jquery is okay.
EDIT
Uhmm I guess my question was a bit unclear. Well I edited my code above. You can see there the table in which there are 2 columns. I want it to retain that way after the page refreshes. But so far I get stuck with modifying the code.. and it doesn't save the color anymore. I think that I made a mistake along the way but I cannot figure it out.. :(
UPDATE
Okay another try at @trincot's answer, I kinda found what I was looking for but not quite. Its a bit long and its unnecessary to highlight the text and for inputting text. The whole box should be painted not highlighted. Please refer to this JSFIDDLE 1. Below is the one I modified.
As PartyPete25 suggested, We can make use of HTML5 localstorage.
Here's working JSFiddle
So here is the code for you,
<table border="1px" width="50%">
<tr>
<td><span class="bgValue"></span></td>
<td><span class="bgColor">1</span></td>
</tr>
<tr>
<td><span class="bgValue"></span></td>
<td><span class="bgColor">5</span></td>
</tr>
<tr>
<td><span class="bgValue"></span></td>
<td><span class="bgColor">8</span></td>
</tr>
</table>
<input type="button" value="Try it" />
JS
var tdValue = $('.bgValue');
var storedBgColor = localStorage.getItem('.bgColor');
if (storedBgColor) {
tdValue.parent().css('background-color', storedBgColor);
} else {
// set default color
alert('no color set');
}
$('input').click(function() {
$('td span').each(function(index) {
if ($(this).text().length !== 0) {
$(this).parent().css('background-color', 'yellow');
var bgColor = $('.bgColor');
localStorage.setItem('.bgColor', 'yellow');
// When a span with some value is found, alert the index of the row
alert($(this).closest('tr')[0].rowIndex);
}
});
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments