0

I am having some problem with this jQuery function. I have a table and onclick I need change the background to the tr's. And every tr has his own background color. This function change the background color but don't remove the class when the other tr is clicked.

HTML

<table class="steps_choose_pack" id="steps_domain_email"> <tr style="float:left;" id="tr_ess" class="essential_tr"> <td class="step2_tab_1" id="step2_domain_ess"><input type="radio" class="myRadio" name="field" value="essential" onclick= "showHide(['hide_steps_domain_01'],[],1);"></td> <td class="step2_tab_2"><strong>Essential:</strong>Domain</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;28</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> <tr style="float:left;" id="tr_clss" class="classic_tr"> <td class="step2_tab_1" id="step2_domain_class"><input type="radio" class="myRadio" name="field" value="classic" onclick= "showHide(['hide_steps_domain02_01'],[],1);"></td> <td class="step2_tab_2"><strong>Classic:</strong>Domain &amp; Business email</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;52</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> <tr style="float:left;" id="tr_prm" class="premier_tr"> <td class="step2_tab_1" id="step2_domain_prm"><input type="radio" class="myRadio" name="field" value="premier"></td> <td class="step2_tab_2"><strong>Premier:</strong>Domain, business email &amp; hosting</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;279</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> </table>

jQuery

$(document).ready(function(){ $('.steps_choose_pack').click(function() { $('tr.essential_tr').click( function() { $(this).siblings().removeClass('step_active_ess'); $(this).addClass('step_active_ess').removeClass("hover_table_type"); }); $('tr.classic_tr').click( function() { $(this).siblings().removeClass('step_active_class'); $(this).addClass('step_active_class').removeClass("hover_table_type"); }); $('tr.premier_tr').click( function() { $(this).siblings().removeClass('step_active_prm'); $(this).addClass('step_active_prm').removeClass("hover_table_type"); }); }); });
Improve this question
8
  • You mean that the addClass() is working but the siblings().removeClass() not? Commented Nov 8, 2013 at 14:08
  • you're binding a new handler to trs everytime you click on the table ? doesn't make sense. Commented Nov 8, 2013 at 14:14
  • sorry I am not so expert in jquery Commented Nov 8, 2013 at 14:16
  • see here stackoverflow.com/questions/1821175/change-tr-background-color Commented Nov 8, 2013 at 14:19
  • Is this what you are trying to do? jsfiddle.net/YwBy7 Commented Nov 8, 2013 at 14:23

2 Answers 2

Reset to default
1

I am not sure this is the best way but I solved like this:

HTML

<table class="steps_choose_pack" id="steps_domain_email"> <tr style="float:left;" id="tr_ess" class="essential_tr"> <td class="step2_tab_1" id="step2_domain_ess"><input type="radio" class="myRadio" name="field" value="essential" onclick= "showHide(['hide_steps_domain_01'],[],1);"></td> <td class="step2_tab_2"><strong>Essential:</strong>Domain</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;28</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> <tr style="float:left;" id="tr_clss" class="classic_tr"> <td class="step2_tab_1" id="step2_domain_class"><input type="radio" class="myRadio" name="field" value="classic" onclick= "showHide(['hide_steps_domain02_01'],[],1);"></td> <td class="step2_tab_2"><strong>Classic:</strong>Domain &amp; Business email</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;52</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> <tr style="float:left;" id="tr_prm" class="premier_tr"> <td class="step2_tab_1" id="step2_domain_prm"><input type="radio" class="myRadio" name="field" value="premier"></td> <td class="step2_tab_2"><strong>Premier:</strong>Domain, business email &amp; hosting</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;279</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> </table>

jQuery

$(document).ready(function(){ $('.essential_tr').click(function() { $('.steps_choose_pack tr').not($(this)).removeClass('step_active_ess step_active_class step_active_prm'); $(this).addClass('step_active_ess').removeClass("hover_table_type"); }); $('.classic_tr').click(function() { $('.steps_choose_pack tr').not($(this)).removeClass('step_active_class step_active_ess step_active_prm'); $(this).addClass('step_active_class').removeClass("hover_table_type"); }); $('.premier_tr').click(function() { $('.steps_choose_pack tr').not($(this)).removeClass('step_active_prm step_active_class step_active_ess'); $(this).addClass('step_active_prm').removeClass("hover_table_type"); }); });
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

try this 

<style> .high-light{background:blue !important;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> $(document).ready(function(){ $('table tr').click(function(){ $(this).addClass("high-light"); }); $('table tr td').click(function(){ $(this).parent().find('td').addClass("high-light"); }); }); </script> <table class="steps_choose_pack" id="steps_domain_email"> <tr style="float:left;" id="tr_ess" class="essential_tr"> <td class="step2_tab_1" id="step2_domain_ess"><input type="radio" class="myRadio" name="field" value="essential" onclick= "showHide(['hide_steps_domain_01'],[],1);"></td> <td class="step2_tab_2"><strong>Essential:</strong>Domain</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;28</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> <tr style="float:left;" id="tr_clss" class="classic_tr"> <td class="step2_tab_1" id="step2_domain_class"><input type="radio" class="myRadio" name="field" value="classic" onclick= "showHide(['hide_steps_domain02_01'],[],1);"></td> <td class="step2_tab_2"><strong>Classic:</strong>Domain &amp; Business email</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;52</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> <tr style="float:left;" id="tr_prm" class="premier_tr"> <td class="step2_tab_1" id="step2_domain_prm"><input type="radio" class="myRadio" name="field" value="premier"></td> <td class="step2_tab_2"><strong>Premier:</strong>Domain, business email &amp; hosting</td> <td class="step2_tab_3">Qty: <select></select> </td> <td class="step2_tab_4">Unit Price:<strong> &pound;279</strong> Annually</td> <td class="step2_tab_5"><a href=""><img class="question_mark" src="<?=base_url();?>images/question_mark.png"></a></td> </tr> </table>

For more Change colour of table row onclick

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.