Change Cell Colour and attr in a different Table

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
IGGt
Forum Contributor
Posts: 173
Joined: Thu Nov 26, 2009 9:22 am

Change Cell Colour and attr in a different Table

Post 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');	
    	}
    );
}
); 
avibitton
Forum Newbie
Posts: 18
Joined: Sat Jul 14, 2012 4:35 pm

Re: Change Cell Colour and attr in a different Table

Post 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 .
IGGt
Forum Contributor
Posts: 173
Joined: Thu Nov 26, 2009 9:22 am

Re: Change Cell Colour and attr in a different Table

Post 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).
avibitton
Forum Newbie
Posts: 18
Joined: Sat Jul 14, 2012 4:35 pm

Re: Change Cell Colour and attr in a different Table

Post by avibitton »

so is it ok now? . or you need help in something else ?
Avi.
IGGt
Forum Contributor
Posts: 173
Joined: Thu Nov 26, 2009 9:22 am

Re: Change Cell Colour and attr in a different Table

Post by IGGt »

No, unless you can see a way to improve it, then it currently does what I need it to,

cheers.
Post Reply