Repeater Row remove class [Answered]RSS

3 replies

Last post Apr 10, 2019 10:29 AM by samwu

‹ Previous Thread|Next Thread ›

Shortcuts

Related Links

- Reply
geetasks
Member

81 Points

339 Posts

Repeater Row remove class

Apr 09, 2019 01:00 PM|geetasks|LINK

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> </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>
- Reply
geetasks
Member

81 Points

339 Posts

Re: Repeater Row remove class

Apr 10, 2019 04:26 AM|geetasks|LINK

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

81 Points

339 Posts

Re: Repeater Row remove class

Apr 10, 2019 08:36 AM|geetasks|LINK

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>

samwu

Participant

840 Points

294 Posts

Re: Repeater Row remove class

Apr 10, 2019 10:29 AM|samwu|LINK

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

MSDN Community Support
Please remember to click "Mark as Answer" the responses that resolved your issue.
If you have any compliments or complaints to MSDN Support, feel free to contact MSDNFSF@microsoft.com.

‹ Previous Thread|Next Thread ›