Change Cell Colour and attr in a different Table
Posted: Mon Jul 16, 2012 9:33 am
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:
Example of Javascript (all others tables use the same JS, just with different ID's)
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>
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');
}
);
}
);