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

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

score 1 · Accepted Answer

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

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

score 0 · Accepted Answer

尝试这个

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

有关更多更改表格行的颜色 onclick

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

2 回答 2

Related

Reference