Блог

Я искал везде, но мой код вообще не работает. Я просто хочу отобразить содержимое td, на который я нажимаю.

У меня есть этот стол:

 <tr class='rowData' tooltip='{caracteristicas}'>
  <td nowrap class='Body'><a href='{caracteristicas}' target="_blank" style="color:black" onClick='return confirm("VOCÊ SERÁ REDIRECIONADO PARA:rr {caracteristicas}")'>{inputDescItem}</a></td>
  <td nowrap class='Body' align='right'>{quantidade} {hiddenCodigoItem}</td>
  <td nowrap class='Body' align='center'>{grupoEstoque}</td>
  <td nowrap class='Body' align='center'>{inputCodigoItem}</td>
  <td nowrap class='Body' align='center'>{btnAtualizaItem}</td>
  <td nowrap class='Body' align='center'><button type="button" class="btnTest">Assign</button></td>
  <td nowrap class='Body' align='center' class="testNameClass" name="output" style="display:none;">{caracteristicas}</td>
</tr>

 

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

У меня есть следующий javascript:

 $("btnTest").on("click", function() {
  alert($(this).closest('tr').find('testNameClass').val());
});
 

Я не очень хорошо разбираюсь в JS, так что, пожалуйста, полегче со мной.

Похоже, вам не хватает $(«.btnTest») вместо $(«btnTest») и просто попробуйте

 $(".btnTest").on("click", function() {
alert($(this).parents('tr').find('.testNameClass').val());
});
 

Чтобы настроить таргетинг на конкретные элементы с помощью a class , вам нужно использовать точку перед именем класса. В вашем случае .btnTest И. .testNameClass

 $(".btnTest").on("click", function() {
 alert($(this).closest('tr').find('.testNameClass').text());
});
 

Поскольку вы ищете текст внутри элемента td, вы должны использовать .text() вместо .val()

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

 $(".btnTest").on("click", function() {
  alert($(this).closest('tr').find('.testNameClass').text());
});
  

 .testNameClass {
  display: none;
}
table {
    border-collapse: collapse;
}
th, td { border: 1px solid #000; padding: 10px; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered" id="dataTable">
    <thead>
        <tr>
            <th>pk</th>
            <th>ent_1</th>
            <th>ent_2</th>
            <th>ent_3</th>
        </tr>
    </thead>
    <tbody>
      <tr>
          <td>PK Row 0</td>
          <td>Ent_1</td>
          <td><button type="button" class="btnTest">Assign</button></td>
          <td class="testNameClass">Row 0 Ent_3</td>
      </tr>
      <tr>
          <td>PK Row 1</td>
          <td>Ent_1</td>
          <td><button type="button" class="btnTest">Assign</button></td>
          <td class="testNameClass">Row 1 Ent_3</td>
      </tr>
      <tr>
          <td>PK Row 2</td>
          <td>Ent_1</td>
          <td><button type="button" class="btnTest">Assign</button></td>
          <td class="testNameClass">Row 2 Ent_3</td>
      </tr>
    </tbody>
</table> 

Вашему методу будет передана ссылка на MouseEvent то, что представляет собой подробную информацию о клике. Поскольку это an Event , у него есть a currentTarget , который представляет «элемент» в так называемом DOM … внутренняя структура данных, которая представляет HTML. Эта структура данных имеет форму дерева, где каждый узел имеет одного родителя, двух братьев и сестер и нескольких детей. Теперь вы можете написать код, чтобы «подниматься по дереву», пока не встретите td узел. Первое, к чему вы приходите, — это самое сокровенное, содержащее td .

Я думаю, что вы неправильно ориентируетесь на использование a . перед именем класса — также я вижу два класса в одном элементе, я настроил это для вас здесь, посмотрите

https://jsfiddle.net/hw0ansyj/1/

 $(".btnTest").on("click", function() {
    alert($('.testNameClass').html());
});