Question

我在使用这个jQuery函数时遇到了一些问题。我有一张桌子和onclick我需要将背景更改为tr。每个tr都有自己的背景颜色。此功能可更改背景颜色，但在单击其他tr时不会删除该类。

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");
        });
    });
});

Answer 1

我不确定这是最好的方法，但我这样解决了：

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");
            });
    });

Answer 2

试试这个

<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>

了解更多Change colour of table row onclick

jquery将tr背景颜色更改为表中的特定tr

2 个答案: