Page 1 of 1

Change Cell Colour and attr in a different Table

Posted: Mon Jul 16, 2012 9:33 am
by IGGt
Hi Guys,

I have a form, which contains 5 tables.
Each table has the same headers <th> as the others.
Three tables have checkboxes, the others have radio buttons in each <td>.
I have a piece of Javascript for each table, which changes the background colour of the selected items.

What I am looking to do though, is find a way so that if the box in the first table is selected, it marks all the corresponding fields in the other tables as disabled (and available again when the first table is unticked).

What would be a good way to go about this?


example of my tables:

Code: Select all

<form name="DBReturn" action="config.dbUpdate.php" method="post" class="center" onSubmit="return ValidateDBSelect()">

DATABASES TO BE IGNORED
<table id="DBSelectIgnTable" class="DBSelectTable"> 
 <tr>
  <th class="CellGrey RoundTopLeft">DB1</td>
  <th class="CellGrey ">DB2</td>
. . .
 </tr>
 <tr>
  <td class="CellWhite RoundBottomLeft"><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="1"></td>
  <td class="CellWhite "><INPUT TYPE="checkbox" NAME="ignore[]" VALUE="2"></td>
. . .
 </tr>
</table>


TABLE NUMBER 2
<table id="SlaveDBs" class="DBSelectTable"> 
 <tr>  
  <th class="CellGrey RoundTopLeft">DB1</td>
  <th class="CellGrey ">DB2</td>
. . .
 </tr>
 <tr>
  <td class="CellWhite RoundBottomLeft"><INPUT TYPE="checkbox" NAME="slave[]" VALUE="1"></td>
  <td class="CellGreen"><INPUT TYPE="checkbox" NAME="slave[]" VALUE=2 checked></td>
. . .
 </tr>
</table>

TABLE NUMBER 3
<table id="Set3DBs" class="DBSelectTable"> 
 <tr>  
  <th class="CellGrey RoundTopLeft">DB1</td>
  <th class="CellGrey ">DB2</td>
. . .
 </tr>
 <tr id="Tab3a">
  <td><INPUT TYPE="radio" NAME="group2" VALUE="1"></td>
  <td><INPUT TYPE="radio" NAME="group2" VALUE="2"></td>
. . .
 </tr>
 <tr id="tab3b">
  <td class="RoundBottomLeft"><INPUT TYPE="radio" NAME="group3" VALUE="1"></td>
  <td><INPUT TYPE="radio" NAME="group3" VALUE="2"></td>
. . .
 </tr>
</table>

. . .
TABLE 4
TABLE 5

<p class="submit" id="submitConfirm"><input type="submit" Name='submit' value="Confirm Selection"/></p>

</form>
Example of Javascript (all others tables use the same JS, just with different ID's)

Code: Select all

//CHANGE COLOUR OF BACKGROUND ON IGNORE DB's
$(document).ready(function()
{
    $("#DBSelectIgnTable").on('click','input:checkbox',function()
		{ 
    		if ($(this).attr('checked')) 
    			{
        			$(this).closest('td').removeClass('CellWhite').addClass('CellRed');
    			} else {
        			$(this).closest('td').removeClass('CellRed').addClass('CellWhite');
    			};  	
		}
	)
}		
);

//CHANGE COLOUR OF RADIO BUTTONS ON SLAVE DB's
$(document).ready(function()
{
    $('#SlaveDBs td').change(function()
    	{
	    	$('#SlaveDBs td').removeClass('CellGreen');
       		$(this).addClass('CellGreen');	
    	}
    );
}
); 

Re: Change Cell Colour and attr in a different Table

Posted: Wed Jul 18, 2012 4:19 pm
by avibitton
Hi
in jquery using a selector you can do action on a praent and all his child . just google the action you need to do with jquery .

http://api.jquery.com/parent/

hope it will help you , i guess its what you need .

Avi .

Re: Change Cell Colour and attr in a different Table

Posted: Thu Jul 19, 2012 1:55 am
by IGGt
Cheers, that was in fact part of the problem. What I (well not me per se) came up with is:

Code: Select all

$(document).ready(function()
{
    $("#DBSelectIgnTable").on('click','input:checkbox',function()
		{ 
    		if ($(this).prop('checked')) 
    			{
        			var val = $(this).val();
        			$(this).closest('td').removeClass('CellWhite').addClass('CellRed');
	    			$(".DBUpdateTables td").find("[value='"+ val +"']").prop('checked',false)
	    				.prop('disabled',true)
	    				.parent()
	    					.addClass('CellRed')
	    					.removeClass('CellGreen')
	    					.removeClass('CellBlue')
	    					.removeClass('CellOrangeCust')	
    			}
    		else
    			{    
	    			var val = $(this).val();
        			$(this).closest('td').removeClass('CellRed').addClass('CellWhite');
	    			$(".DBUpdateTables td").find("[value='"+ val +"']").prop('disabled',false).parent().removeClass('CellRed')	
    			 }
		}
	)
}		
);
In this way I can easier compare the value of 'val' and then add / remove as appropriate. (I also had to use a separate class for the latter tables, otherwise the first table was disabled at the same time, preventing me from un-disabling them).

Re: Change Cell Colour and attr in a different Table

Posted: Thu Jul 19, 2012 3:39 am
by avibitton
so is it ok now? . or you need help in something else ?
Avi.

Re: Change Cell Colour and attr in a different Table

Posted: Thu Jul 19, 2012 3:48 am
by IGGt
No, unless you can see a way to improve it, then it currently does what I need it to,

cheers.