locked
Repeater Row remove class RRS feed

  • Question

  • User1126057398 posted

    I had created one questionaire in which answer can be like Yes,No,etc. Yes/No, etc. are displayed  in a Label but displayed as button by css. In a row when I click on say 'Yes' label, then it's background color changes and a smily is displayed. When No is clicked, then, Yes, background color should be removed and background color should be displayed(in a row). Though Yes background is displayed but when 'No' is clicked, then, Yes's background is not removed. How can this be done in jquery?

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="QuesAns.aspx.cs" Inherits="TestPrj.QuesAns" %>

    <!DOCTYPE html>

    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <title></title>
    <link type="text/css" href="Content/bootstrap.min.css" rel="stylesheet" />
    <script src="Scripts/jquery.min.js"></script>

    <style type="text/css">
    .btncolor {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 3px 12px;
    width: 100%;
    }

    .queans_hs {
    overflow: auto;
    width: auto;
    height: 500px;
    margin-top:20px;
    }

    .lblques_hs{
    background-color:#ffffaa;
    text-align:right;
    }
    .bgClrHappy{ /*Happy*/
    background-color:#000930;
    color:#fff;
    }
    .bgClrSad{ /*Sad*/
    background-color:#D70000;
    color:#fff;
    }
    .bgClrInd{ /*Indifferent*/
    background-color:#003366;
    color:#fff;
    }
    .test{visibility:hidden;}
    .imgpichappy{
    visibility:visible;
    background-image: url(../Images/sn-happy.png);
    width: 16px;
    height: 16px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    }
    .imgpicsad{
    visibility:visible;
    background-image: url(../Images/sn-sad.png);
    width: 16px;
    height: 16px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    }
    .imgpicind{
    visibility:visible;
    background-image: url(../Images/sn-indif.png);
    width: 16px;
    height: 16px;
    background-size: 100% auto;
    background-repeat: no-repeat;
    }
    </style>
    <script type ="text/javascript">
    $(function () {
    //$('.btncolor').attr("title","Hide");
    $('.btncolor').click(function () {
    // alert($(this).attr("title"));
    if ($(this).attr("title").trim() == 'Happy')
    {
    // $(this).closest('tr').removeclass('bgClrHappy');
    // $('tr').removeClass('bgClrHappy');
    $(this).addClass('bgClrHappy');
    $('.test').addClass('imgpichappy').removeClass('test');
    }
    else if ($(this).attr("title").trim() == 'Sad')
    {
    $(this).addClass('bgClrSad');
    $('.test').addClass('imgpicsad').removeClass('test');
    }
    else {
    $(this).addClass('bgClrInd');
    $('.test').addClass('imgpicsad').removeClass('test');
    }

    // $(this).css("background-color", "yellow");
    //alert('s');
    });
    });
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div class="container">
    <div class="row">
    <div class="col-sm-12 queans_hs">
    <%-- <asp:Button ID="btnAns2" CssClass="btncolor" Text='<%# Eval("RESPONSE_B") %>' runat="server" />--%>
    <asp:Repeater ID="repQues" runat="server">
    <ItemTemplate>
    <table>
    <tr>
    <td>
    <%-- <div class="imgpichappy"></div>--%>
    <asp:Image ID="imgRes" CssClass="test" runat="server" /></td>
    <td colspan="4">
    <asp:Label ID="lblQues" Text='<%# Eval("QUESTION_DESCP") %>' runat="server" CssClass="lblques_hs"></asp:Label>
    </td>
    </tr>
    <tr>
    <td>&nbsp;</td>
    <td><asp:Label ID="btnAns1" CssClass="btncolor" ToolTip='<%#Eval("RESPONSE_A_SMILE") %>' Text='<%# Eval("RESPONSE_A") %>' runat="server" /></td>
    <td><asp:Label ID="btnAns2" CssClass="btncolor" ToolTip='<%#Eval("RESPONSE_B_SMILE") %>' Text='<%# Eval("RESPONSE_B") %>' runat="server" /></td>
    <td><asp:Label ID="btnAns3" CssClass="btncolor" ToolTip='<%#Eval("RESPONSE_C_SMILE") %>' Text='<%# Eval("RESPONSE_C") %>' runat="server" /></td>
    <td><asp:Label ID="btnAns4" CssClass="btncolor" ToolTip='<%#Eval("RESPONSE_D_SMILE") %>' Text='<%# Eval("RESPONSE_D") %>' runat="server" /></td>
    </tr>
    </table>
    </ItemTemplate>
    </asp:Repeater>
    </div>
    </div>

    </div>
    </form>
    </body>
    </html>

    Tuesday, April 9, 2019 1:00 PM

Answers

  • User1126057398 posted

    Done it like below:

    <script type ="text/javascript">
    $(function () {
    //$('.btncolor').attr("title","Hide");
    $('.btncolor').click(function () {
    // alert($(this).attr("title"));
    var row = $(this).closest('tr');
    if ($(this).attr("title").trim() == 'Happy')
    {
    //Remove Button BackgroundColor for Happy,Sad,Indifferent
    row.find(".btncolor").removeClass('bgClrHappy');
    row.find(".btncolor").removeClass('bgClrSad');
    row.find(".btncolor").removeClass('bgClrInd');
    //Add Button BackgroundColor for Happy
    $(this).addClass('bgClrHappy');

    //Add class for Happy and Remove class for Sad,Indifferent
    var prev = row.prev();
    prev.find(".myimg").addClass('imgpichappy').removeClass('test').removeClass('imgpicsad').removeClass('imgpicind');
    //$('.myimg').addClass('imgpichappy').removeClass('test');
    }
    else if ($(this).attr("title").trim() == 'Sad')
    {
    row.find(".btncolor").removeClass('bgClrHappy');
    row.find(".btncolor").removeClass('bgClrSad');
    row.find(".btncolor").removeClass('bgClrInd');
    $(this).addClass('bgClrSad');
    //Add class for Sad and Remove class for Happy,Indifferent
    var prev = row.prev();
    prev.find(".myimg").addClass('imgpicsad').removeClass('test').removeClass('imgpichappy').removeClass('imgpicind');
    //$('.myimg').addClass('imgpicsad').removeClass('test');
    }
    else
    {
    row.find(".btncolor").removeClass('bgClrHappy');
    row.find(".btncolor").removeClass('bgClrSad');
    row.find(".btncolor").removeClass('bgClrInd');
    $(this).addClass('bgClrInd');
    //Add class for Indifferent and Remove class for Happy, Sad
    var prev = row.prev();
    prev.find(".myimg").addClass('imgpicind').removeClass('test').removeClass('imgpichappy').removeClass('imgpicsad');
    // $('.myimg').addClass('imgpicsad').removeClass('test');
    }

    // $(this).css("background-color", "yellow");
    });
    });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 10, 2019 8:36 AM

All replies

  • User1126057398 posted

    Any Suggestions. How to remove all class from a td and keeping only one, just like radio button, only one selection can be done?

    Wednesday, April 10, 2019 4:26 AM
  • User1126057398 posted

    Done it like below:

    <script type ="text/javascript">
    $(function () {
    //$('.btncolor').attr("title","Hide");
    $('.btncolor').click(function () {
    // alert($(this).attr("title"));
    var row = $(this).closest('tr');
    if ($(this).attr("title").trim() == 'Happy')
    {
    //Remove Button BackgroundColor for Happy,Sad,Indifferent
    row.find(".btncolor").removeClass('bgClrHappy');
    row.find(".btncolor").removeClass('bgClrSad');
    row.find(".btncolor").removeClass('bgClrInd');
    //Add Button BackgroundColor for Happy
    $(this).addClass('bgClrHappy');

    //Add class for Happy and Remove class for Sad,Indifferent
    var prev = row.prev();
    prev.find(".myimg").addClass('imgpichappy').removeClass('test').removeClass('imgpicsad').removeClass('imgpicind');
    //$('.myimg').addClass('imgpichappy').removeClass('test');
    }
    else if ($(this).attr("title").trim() == 'Sad')
    {
    row.find(".btncolor").removeClass('bgClrHappy');
    row.find(".btncolor").removeClass('bgClrSad');
    row.find(".btncolor").removeClass('bgClrInd');
    $(this).addClass('bgClrSad');
    //Add class for Sad and Remove class for Happy,Indifferent
    var prev = row.prev();
    prev.find(".myimg").addClass('imgpicsad').removeClass('test').removeClass('imgpichappy').removeClass('imgpicind');
    //$('.myimg').addClass('imgpicsad').removeClass('test');
    }
    else
    {
    row.find(".btncolor").removeClass('bgClrHappy');
    row.find(".btncolor").removeClass('bgClrSad');
    row.find(".btncolor").removeClass('bgClrInd');
    $(this).addClass('bgClrInd');
    //Add class for Indifferent and Remove class for Happy, Sad
    var prev = row.prev();
    prev.find(".myimg").addClass('imgpicind').removeClass('test').removeClass('imgpichappy').removeClass('imgpicsad');
    // $('.myimg').addClass('imgpicsad').removeClass('test');
    }

    // $(this).css("background-color", "yellow");
    });
    });
    </script>

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Wednesday, April 10, 2019 8:36 AM
  • User288213138 posted

    Hi geetasks,


      I'm really sorry for not being able to answer your question in time.


    According to your description, I did a similar effect, When you click Yes, it's highlighted,  When you click No, it also highlights, but the Yes highlighting disappears.  The important thing is to find its parent and sibling elements through the $(this).parent().children() method.
    The code:

    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <style type="text/css">
                td {
                    padding: 1em;
                    border: 1px solid #aaa;   
                }
                
                .class1{
                    background-color:aqua
                }
                
                .class2{
                    background-color:yellow;
                }
               
        </style>
        <script src="jquery-3.3.1.min.js"></script>
        <script>
            
            $(document).ready(function () {
                $('table tr td:nth-child(1)').click(function () {
                    $(this).parent().children().removeClass("class2");
    
                    $(this).addClass("class1")
                  
    
                })
                $('table tr td:nth-child(2)').click(function () {
                     
                    $(this).parent().children().removeClass("class1");
                    $(this).addClass("class2");
                    
                })
            })
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <table>
                    <tr>
                        <td >Yes</td>
                        <td >No</td>
                    </tr>
                     <tr>
                        <td >Yes</td>
                        <td >No</td>
                    </tr>
                       
                </table>
            </div>
        </form>
    </body>
    </html>

    The Result:

    I hope it helps with your questions.

    Best Regard,

    Sam

    Wednesday, April 10, 2019 10:29 AM