JQuery / Javascript моя функция не работает при нажатии кнопки

Question

У меня есть кнопка, при нажатии которой я хочу получить все данные из строки.Мой файл .php (у меня также есть php-код, не включенный здесь) выглядит так (я обрезал таблицу для stackoverflow)

<tr class='rowdata'>
     <td>Bob</thd>
</tr>

<input type='submit' class='getRow' value='ClickMe'>

<script>
    $(".getRow").click(function() {
       var rowOfData = $(this).closest(".rowdata");
       alert(rowOfData.text());
    });

</script>

Прямо сейчас я нажимаю, и ничего не происходит.Есть идеи?.префикс означает, что он ищет класс.

Answer 1

Ну, во-первых, проверили ли вы консоль разработчика (F12) на наличие ошибок. Вы уверены, что ссылались на библиотеку JQuery.

Далее, даже со ссылкой на JQuery, .closest() будет искать элементы-предки элемента, к которому вы обращаетесь. Если ваша кнопка не является потомком элемента, который вы хотите найти, вы не найдете его.

Теперь, предполагая, что .closest() действительно находит вашу строку, вы затем запрашиваете .text() во всей строке. Это может быть то, что вы хотите, но, скорее всего, вам нужно, чтобы ячейка данных за ячейкой.

Кроме того, ваша кнопка - это кнопка submit, которая используется для отправки данных формы, но не похоже, что вы здесь делаете. Если это так, используйте обычную кнопку.

И ваш HTML-код недействителен, так как у вас плохой закрывающий тег для вашей ячейки.

Итак, исправляя все это:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
<tr class='rowdata'>
     <td>Bob</td>
     <td>Smith</td>
     <td><input type='button' class='getRow' value='ClickMe'></td>
</tr>
</table>

<script>
    $(".getRow").click(function() {
       var rowOfData = $(this).closest(".rowdata");
       alert(rowOfData.text()); // Gets all the text in the row
       alert($("td:first-child", rowOfData).text()); // Gets just first cell
    });
</script>