Получите значение скрытой метки в таблице, используя jquery?

Question

У меня есть таблица html в виде списка и есть скрытая метка в названии «vehicle_num». Я могу получить выбранную строку таблицы, а также любой из td, однако я не могу получить значение метки. Я пробовал:

var vehicle_number = $(this).closest('tr').children('#vehicle_num').text(); 

Ниже приведен код для представления списка. Как я могу получить значение метки?

<asp:ListView ID="lvEquipmentList" runat="server" DataKeyNames="vehicle_number"> 
    <LayoutTemplate> 
      <table id="table-equipment-list" class="table table-list"> 
       <thead> 
        <tr> 
         <th scope="col" class="product-line">Product line</th> 
         <th scope="col" class="model-number">Model #</th> 
         <th scope="col" class="serial-number">Serial #</th> 
         <th scope="col" class="dar-status">DAR Status</th> 
         <th scope="col" class="ship-date">Ship Date</th> 
        </tr> 
       </thead> 
       <tbody> 
        <asp:PlaceHolder ID="ItemPlaceholder" runat="server" /> 
       </tbody> 
      </table> 
    </LayoutTemplate> 
    <ItemTemplate> 
     <tr> 
      <th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th> 
      <td class="model-number"><%#Eval("model")%><label class="vehicle_num" hidden="hidden"><%#Eval("vehicle_number")%></label></td> 
      <td class="serial-number"><%#Eval("serial_number")%></td> 
      <td class="dar-status"><img src='<%#Eval("display_status") %>'/></td> 
      <td class="ship-date"><%#Eval("date")%></td> 
     </tr> 
    </ItemTemplate> 
    <EmptyDataTemplate> 
     <table id="table-equipment-list" class="table table-list"> 
      <thead> 
       <tr> 
        <th scope="col" class="product-line">Product line</th> 
        <th scope="col" class="model-number">Model #</th> 
        <th scope="col" class="serial-number">Serial #</th> 
        <th scope="col" class="dar-status">DAR Status</th> 
        <th scope="col" class="ship-date">Ship Date</th> 
       </tr> 
      </thead> 
      <tbody> 
       <tr> 
        <th scope="row" class="product-line"><div class="icon"></div> <span class="line-title"></span></th> 
        <td class="model-number"></td> 
        <td class="serial-number"></td> 
        <td class="dar-status"></td> 
        <td class="ship-date"></td> 
       </tr> 
      </tbody> 
     </table> 
    </EmptyDataTemplate> 
</asp:ListView> 

EDIT

Я редактировал код выше, чтобы поставить метку в столбце таблицы. Я был в состоянии получить значение с помощью:

var vehicle_number = $(this).closest('tr').find('.vehicle_num').text(); 

Answer 1

Это неверный код:

<tr> 
    <th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th> 
    <td class="model-number"><%#Eval("model")%></td> 
    <td class="serial-number"><%#Eval("serial_number")%></td> 
    <td class="dar-status"><img src='<%#Eval("display_status") %>'/></td> 
    <td class="ship-date"><%#Eval("date")%></td> 
    <label id="vehicle_num" hidden="hidden" runat="server"><%#Eval("vehicle_number")%></label> 
</tr> 

Там же странствующий label как ребенок из tr, который не является действительным. Когда браузер попытается это понять, он может сделать что-то с этим label, чтобы построить действительную DOM, которая будет работать с вашими селекторами jQuery.

В label потребности быть в ячейке таблицы:

<tr> 
    <th scope="row" class="product-line"><div class="icon"><img src='<%#Eval("image_path")%>' onerror="this.src='assets/images/placeholder.png';" alt=""/></div> <span class="line-title"><%#Eval("product_line")%></span></th> 
    <td class="model-number"><%#Eval("model")%></td> 
    <td class="serial-number"><%#Eval("serial_number")%></td> 
    <td class="dar-status"><img src='<%#Eval("display_status") %>'/></td> 
    <td class="ship-date"><%#Eval("date")%></td> 
    <td><label id="vehicle_num" hidden="hidden" runat="server"><%#Eval("vehicle_number")%></label></td> 
</tr> 

(.. Или, если он всегда скрыт в любом случае, вы, вероятно, может поставить его в существующей ячейке таблицы В любом случае должна работать)

Кроме того, если в явном виде задана клиентская сторона id, то любое повторение этих записей приведет к дублированию id s в DOM, что также недействительно. Различные браузеры отвечают на id - селекторы на основе выбора по-разному, когда есть дубликат id s, потому что поведение не определено. не Вы, вероятно, хотите использовать класс вместо:

<label class="vehicle_num" ... 

Поскольку label больше не ребенок из tr, а скорее потомок его, используйте find() вместо children():

$(this).closest('tr').find('.vehicle_num')