时间戳

首页 > 解决方案 > JQuery/Javascript 我的功能在按下按钮时没有运行

javascript - JQuery/Javascript 我的功能在按下按钮时没有运行

问题描述

我有一个按钮，当我单击时，我希望它从行中获取所有数据。我的 .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>

现在我点击并没有任何反应。有任何想法吗？这 。前缀表示它正在搜索类。

标签： javascriptjqueryfunctionclassrows

解决方案

首先，您是否检查了开发人员的控制台 (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>

推荐阅读