如何使用javascript获取gridview控件的<td>元素内的元素值？答案

【问题标题】：How to get the values of elements inside the <td> element of a gridview control using javascript?如何使用javascript获取gridview控件的<td>元素内的元素值？
【发布时间】：2013-12-20 19:53:40
【问题描述】：

我需要一些帮助来解决一些关于使用 javascript 的问题。我正在使用 gridview 控件来显示从数据库中保存的所有 cmets。我想要的是当用户将鼠标悬停在每条评论上时，它将突出显示已经解决的背景，并希望在其中显示一个带有关闭按钮的 div 元素，并在 mouseover 事件期间获取元素内一个标签控件的文本值.在 onmouseover 期间获取该标签的文本值后，我想将其显示在另一个 div 元素中，并且我还想在 onmouseover 事件期间获取位于 gridview 之外的另一个标签控件的文本值。以下是详细信息：

HTML 布局：

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

}

总结一些问题。

我需要在悬停时在 gridview 的每一行中显示 Close div，因为到目前为止，使用上面的代码只会在第一行显示 Close div，但是如果将鼠标移动到另一行，则 Close div 行仍然显示在第一行，当鼠标移动到另一行时，应该转移或显示在另一行。
我需要获取位于gridview元素内的名称标签的文本值，并在悬停期间将其显示在div测试中。
我还需要在鼠标悬停期间获取位于 gridview 之外的 Label4 的文本值。

感谢您的帮助...我希望有人能够帮助我解决这 3 个问题。

【问题讨论】：

函数“highlightNext”定义在哪里？
你想对“Label4的文本值”做什么？
@KJPrice..感谢这段代码，我没有多个具有相同 ID 的元素。我应用了下面的所有代码，现在使用 X 按钮在每一行显示 div Close，但仍然存在一些故障，首先测试 div 显示 Button3 的文本值，它是 X 而不是位于内部的名称 Label element.Second 是我现在无法清除第二行和其余行中的 Close div，因为我忘了给你我的 highlightClear 函数。 function highlightClear() {document.getElementById("Close").style.display ="none";document.getElementById("test").innerHTML = "";}
这是我在评论中所说的 highlightClear() 函数。您能否更正和修改我的 onmouseout 事件的 highlightClear() 函数，以便在移开鼠标后清除所有 Close div因为该代码只能清除第一行。
谢谢提马克。如果我理解我所看到的（尽管我没有在 asp.net 中运行它），那么每个中都会有一个 id="Close" 的 div。所以似乎确实有多个具有相同 id 的 div，这是一个很大的禁忌。