How to get the values inside the <td> element of a gridview control using javascript

JavaScript
1

Hi!

I need some help for some issues that I want to tuckle some issues about using javascript. I was using gridview control to display all my comments that are saved from the database. What I want is when the user hovers the mouse on each comment it will highlight the background which already solved and want to show one of the div element right there with close button and get the text value of one label control inside the <td> element during mouseover event. After getting the text value of that label during onmouseover I want to display it in another div element and I want to get the text value of another label control which is located outside the gridview during onmouseover event as well. Here are the details 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 to tuckle some issues.

  1. I need the Close div to show in every row of the gridview when hover because as of now using that code above would only show the Close div on the first row but if you move your mouse to another row the Close div row still remains showing on the first row which should supposed to transfer or show in another row when moving the mouse to another row.

  2. I need to get the text value of the name label which is located inside the <td> element of the gridview and display it in div test during hover.

  3. I need to get the text value of the Label4 which is located outside the gridview during onmouseover as well.

Thanks for any help…I hope somebody could be able to help me tuckle this 3 issues.