javascript - 如何使用 javascript 获取 gridview 控件的 元素内的元素值？

Question

我需要一些帮助来解决一些问题，我想解决一些关于使用 javascript 的问题。我正在使用 gridview 控件来显示我从数据库中保存的所有评论。我想要的是，当用户将鼠标悬停在每个评论上时，它会突出显示已经解决的背景，并希望使用关闭按钮显示其中一个 div 元素，并在鼠标悬停事件期间获取元素内的一个标签控件的文本值.在 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";

}

总结解决一些问题。

1. 我需要 Close div 在悬停时显示在 gridview 的每一行中，因为截至目前，使用上面的代码只会在第一行显示 Close div，但如果您将鼠标移动到另一行，Close div 行仍然显示在第一行，当将鼠标移动到另一行时，应该转移或显示在另一行。

2. 我需要获取位于 gridview 元素内的名称标签的文本值，并在悬停期间将其显示在 div 测试中。

3. 我还需要在 onmouseover 期间获取位于 gridview 之外的 Label4 的文本值。

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

Answer 1

伙计，这看起来真的很复杂。我可能需要你画一幅画。哈哈。据我所知:

首先，您不应该有多个具有相同 ID 的元素。将 (id="Close") 更改为 (class="Close")。

对于这种 dom 查询，jQuery 会很棒。

1)

function highlightNext(){
var highlightNext = document.getElementsByClassName('highlightNext');
    for(var i = 0; i < highlightNext.length; i++){
        highlightNext[i].style.display = 'none';
    }
}

2)

function highlightBG(element, color) {

    element.style.backgroundColor = color;
    //Instead of querying for "Close"
    var Close = element.children[0];
    Close.style.display = "block";
    var getval = Close.innerHTML;
    document.getElementById("test").innerHTML = getval;


}

3)更改标签以提供静态ID

<asp:Label ID="Label4" runat="server" Text='<%# Eval("ID") %>' ClientIDMode="Static"></asp:Label>

用已知信息查询标签:

document.getElementById("Label4");