I am seeking assistance with some JavaScript-related issues. I have been using the gridview control to display comments retrieved from a database. My goal is to highlight the background of each comment when the user hovers over it, display a specific div element with a close button, and extract the text value of a label control within that div during the mouseover event. Additionally, I aim to show this extracted text value in another div element and retrieve the text value of a different label control located outside the gridview during the same onmouseover event. The details are outlined below:
HTML Layout:
<asp:Label ID="Label4" runat="server" Text=' <%#Eval("ID") %>'></asp:Label> //I want to get the text value of this control
<div id="test"></div> //here I want to put the text value of the name label control after getting it during onmouseover
<div id="Username" style =" margin-left :100px; width :1000px">
<asp:GridView ID="gvParentGrid" runat="server" Width="395px"
AutoGenerateColumns="false" GridLines="None" BorderStyle="Solid" BorderWidth="0px"
BorderColor="White" DataKeyNames="ID" onrowcommand="gvParentGrid_RowCommand"
onrowdatabound="gvParentGrid_RowDataBound" >
<Columns>
<asp:TemplateField >
<ItemTemplate>
<tr >
<td id ="comment" onmouseover="highlightBG(this, '#C0C0C0');highlightNext(this, 'black')" onmouseout="highlightBG(this, 'white');highlightClear()" class ="highlightab" style ="border-bottom :2px solid Blue;border-bottom-color :Gray; border-left :0px; border-left-color :White; border-right :0px; border-right-color :White; border-top :0px; border-top-color :White;background-color :White;border-bottom :2px solid Blue;border-bottom-color :Gray; border-left :0px; border-left-color :White; border-right :0px; border-right-color :White; border-top :0px; border-top-color :White;background-color :White; height :100px; width :395px; margin-bottom :5px">
<div id ="Close" style="display :none" ><asp:Button ID="Button3" runat="server" Text="X" style =" cursor:pointer; margin-left :365px; border:0px; background-color :White; color :blue; font-weight :bold; " /></div>
<br />
<asp:Image ID="Image1" runat="server" style=" margin-right :5px; background-image :url('Image/imagebackground.png');" ImageAlign ="Left" Height ="60px" Width="60px" />
<asp:Label ID ="ComID" runat ="server" style="display :none" Text =' <%#Eval("ID") %>' />
<asp:Label ID="name" runat="server" style="font-weight :bolder; color :Blue; " Text='<%# Eval("Name")%>' ></asp:Label> // I want to get this value diplay it in the div test
<p id ="content" class="minimize" style =" border-radius: 4px 4px 4px 4px; max-width :395px; min-height :5px; margin-top :5px; margin-bottom :5px; margin-left :65px; display :block; background-color: #CCCCFF;"> <%# DataBinder.Eval(Container.DataItem,"Comments").ToString() %> </p>
<a href="JavaScript:divexpandcollapse('div<%# Eval("ID") %>');" style ="margin-left :65px; margin-top :1px" >
<input id="btndiv<%# Eval("ID") %>" type="button" value="Reply" style ="border:0px; background-color :White; color :blue; cursor :pointer " />
</a>
</td>
</tr>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
Javascript:
function highlightBG(element, color) {
element.style.backgroundColor = color;
var getval = document.getElementById("commentor").innerHTML;
document.getElementById("test").innerHTML = getval;
document.getElementById("Close").style.display ="block";
}
Summary of the issues I need assistance with.
I require the Close div to appear in every row of the gridview upon hover. Currently, the code only displays the Close div in the first row, and it should transfer to other rows when hovering over them.
I need to extract the text value of the name label inside the gridview's div and display it in the div test when hovered over.
I also need to retrieve the text value of Label4, located outside the gridview, during the onmouseover event.
Thank you for any assistance provided. I hope to resolve these 3 issues soon.