Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    changing the background colour of a table cell permanently

    Hi All,

    I am working on a project which requires the end users' interaction with the webpage.

    I have a table with lot of table cells and a "Save" button. My requirement is to click any table cell to change its background colour and save the changes made by pressing the "Save" button. If any user open that page after the changes have been made, then he should be able to see the new changed colour. What I mean is to make the colour changes permanently on the server.

    I could manage to make the colour changes with JavaScript on the table cells, but not able to figure out how to save the changes permanently.

    Any kind of tips would be of great help....
    I am new to Web Designing, so a little illustrated code would help me understand better.

    Thanks in advance,
    Pinaki.

  • #2
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    you will obviosly need to store data on your server.
    how your color changig should work? it's toggeling between 2 colors only?

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • #3
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Yes, that is obvious!!!! I need to save data on the server. But, i am struggling to figure out how to do that.

    I have 3 colours for the table cells to change. Red, Green and Yellow.

  • #4
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,471
    Thanks
    0
    Thanked 634 Times in 624 Posts
    If you want to send data to the server directly from JavaScript without reloading the page then you need to either use an XMLHttpRequest to send the data and wait for a response (see http://javascriptexample.net/ajax01.php ) or if you don't care about a response then you can use a dummy image generated from the server side language you are using and request to load that from JavaScript passing the value to be sent as a parameter on the end of the image call and having the script that generates the dummy image process the value that you pass (see http://javascriptexample.net/ajax08.php ).
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #5
    Regular Coder patryk's Avatar
    Join Date
    Oct 2012
    Location
    /dev/couch
    Posts
    398
    Thanks
    2
    Thanked 64 Times in 64 Posts
    you could use something like that:
    it's using combintion of javaScript (jQuery) and PHP.
    name it table.php
    it's not exactly what you wanted, because it saves data when you click cells not waiting for any buttons, but you can mod it to do so.
    it will store data in plain text file as json string
    Code:
    <?php
    if(!file_exists('table.txt')){
    	file_put_contents('table.txt', '');
    }
    $tdata = json_decode(file_get_contents('table.txt'), 1);
    if(isset($_GET['id']) && isset($_GET['class'])){
    	$tdata[$_GET['id']] = $_GET['class'];
    	file_put_contents('table.txt', json_encode($tdata));
    	die();
    }
    function setClass($id, $tableColor){
    	if(isset($tableColor[$id])){
    		echo $tableColor[$id];
    	}else{
    		echo 'clear';
    	}
    }
    ?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <title>Untitled Document</title>
    </head>
    <style>
    td{
    	width:30px;
    	height:30px;
    }
    .clear{
    	background:rgba(255,255,555,1);
    }
    .red{
    	background:rgba(255,0,0,1);
    }
    .green{
    	background:rgba(0,255,0,1);
    }
    .yellow{
    	background:rgba(255,255,0,1);
    }
    
    
    </style>
    <script language="javascript">
    	function chColor(id){
    		
    		if($('#' + id).hasClass('clear')){
    			$('#' + id).removeClass('clear');
    			$('#' + id).addClass('red');
    			$.get('table.php?id=' + id + '&class=red');
    			return;
    		}
    		if($('#' + id).hasClass('green')){
    			$('#' + id).removeClass('green');
    			$('#' + id).addClass('yellow');
    			$.get('table.php?id=' + id + '&class=yellow');
    			return;
    		}
    		if($('#' + id).hasClass('yellow')){
    			$('#' + id).removeClass('yellow');
    			$('#' + id).addClass('clear');
    			$.get('table.php?id=' + id + '&class=clear');
    			return;
    		}
    		if($('#' + id).hasClass('red')){
    			$('#' + id).removeClass('red');
    			$('#' + id).addClass('green');
    			$.get('table.php?id=' + id + '&class=green');
    			return;
    		}
    	}
    </script>
    <body>
    <table border="1">
    	<tr>
    		<td id="td0" onclick="chColor(this.id)" class="<?php setClass('td0', $tdata); ?>">&nbsp;</td>
    		<td id="td1" onclick="chColor(this.id)" class="<?php setClass('td1', $tdata); ?>">&nbsp;</td>
    		<td id="td2" onclick="chColor(this.id)" class="<?php setClass('td2', $tdata); ?>">&nbsp;</td>
    		<td id="td3" onclick="chColor(this.id)" class="<?php setClass('td3', $tdata); ?>">&nbsp;</td>
    	</tr>
    	<tr>
    		<td id="td4" onclick="chColor(this.id)" class="<?php setClass('td4', $tdata); ?>">&nbsp;</td>
    		<td id="td5" onclick="chColor(this.id)" class="<?php setClass('td5', $tdata); ?>">&nbsp;</td>
    		<td id="td6" onclick="chColor(this.id)" class="<?php setClass('td6', $tdata); ?>">&nbsp;</td>
    		<td id="td7" onclick="chColor(this.id)" class="<?php setClass('td7', $tdata); ?>">&nbsp;</td>
    	</tr>
    	<tr>
    		<td id="td8" onclick="chColor(this.id)" class="<?php setClass('td8', $tdata); ?>">&nbsp;</td>
    		<td id="td9" onclick="chColor(this.id)" class="<?php setClass('td9', $tdata); ?>">&nbsp;</td>
    		<td id="td10" onclick="chColor(this.id)" class="<?php setClass('td10', $tdata); ?>">&nbsp;</td>
    		<td id="td11" onclick="chColor(this.id)" class="<?php setClass('td11', $tdata); ?>">&nbsp;</td>
    	</tr>
    	<tr>
    		<td id="td12" onclick="chColor(this.id)" class="<?php setClass('td12', $tdata); ?>">&nbsp;</td>
    		<td id="td13" onclick="chColor(this.id)" class="<?php setClass('td13', $tdata); ?>">&nbsp;</td>
    		<td id="td14" onclick="chColor(this.id)" class="<?php setClass('td14', $tdata); ?>">&nbsp;</td>
    		<td id="td15" onclick="chColor(this.id)" class="<?php setClass('td15', $tdata); ?>">&nbsp;</td>
    	</tr>
    </table>
    </body>
    </html>
    demo here: http://freedockstar.com/table.php
    Last edited by patryk; 04-14-2013 at 11:15 PM.

    -------------------------------------------------------------------------------
    "Real Programmers can write assembly code in any language" - Larry Wall

  • Users who have thanked patryk for this post:

    pinaki_biswas (04-15-2013)

  • #6
    New to the CF scene
    Join Date
    Apr 2013
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Thanks you very much!!!!!!!!

    This is exactly what I wanted to do. I am not very familiar with jQuery, so it will take some time for me to understand the exact way your code works.

    But, the output is marvelous!!!!!! You are my "THAT GUY".....

    Pinaki.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •