Как получить значения элементов внутри элемента <td> элемента управления gridview, используя javascript?

0

Мне нужна помощь по некоторым вопросам, которые я хочу уладить некоторые проблемы с использованием javascript. Я использовал gridview для отображения всех моих комментариев, сохраненных в базе данных. То, что я хочу, - это когда пользователь наводит мышь на каждый комментарий, он выделяет фон, который уже решил, и хочет показать один из элементов div прямо там с помощью кнопки закрытия и получить текстовое значение одного элемента управления меткой внутри элемента во время события mouseover, Получив текстовое значение этого ярлыка во время onmouseover, я хочу отобразить его в другом элементе div, и я хочу получить текстовое значение другого элемента управления меткой, который находится вне gridview во время события onmouseover. Ниже приведена подробная информация:

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. Мне нужно получить текстовое значение Label4, которое находится вне gridview во время onmouseover.

Спасибо за любую помощь... Надеюсь, кто-то сможет помочь мне завязать эти 3 вопроса.

  • 0
    Где определена функция "highlightNext"?
  • 0
    Что вы хотите сделать с «текстовым значением Label4»?
Показать ещё 10 комментариев

1 ответ

1

Человек, это кажется очень сложным. Мне может потребоваться, чтобы вы нарисовали картину. Лол. Из того, что я собираю:

Во-первых, у вас не должно быть нескольких элементов с одинаковым идентификатором. Изменить (id = "Закрыть") на (class="Закрыть").

jQuery был бы классным для такого рода запросов dom.

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) Измените ярлык, чтобы получить статический идентификатор

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

Запросите ярлык с тем, что вы уже знаете:

document.getElementById("Label4");

Ещё вопросы

Сообщество Overcoder
Наверх
Меню