按钮点击时，JavaScript函数无效

Question

我已经在互联网上搜索并尝试了很多方法，但是在一个相对简单的问题上卡住了。

下面的代码是我问题的全部范围

<script>
//Function to eventually copy the entire row to another table
function dosomethingcrazy(a)
{
    console.log('hello');
    var $row = a.closest('tr');    // 找到行
    var $text = $row.find('drawingnum').text(); // 找到文本
                            
    // 让我们测试一下
    alert($text);
}
</script>
                
<?php
if (isset($_POST['cars']))
{
    $category = $_POST['cars'];
}
//connect               
$con = mysqli_connect('localhost', 'root', '','ironfabpricing');

// 检查连接
if ($con->connect_error)
{
      die("Connection failed: " . $conn->connect_error);
}

$sql = "SELECT `DWG_NO`, `Description`, `Profile`, `Pieces`, `Length`, `Ib/ft`, `Observ`  FROM `$category`";
$result = $con->query($sql);

// 设置表头
echo "<div class='tableWrap'><table class='styled-table'><thead><tr><th>Add</th><th>DWG_NO</th><th>Description</th><th>Profile</th><th>Pcs</th><th>Length</th><th>Ib_ft</th><th style=width:100%>Observation</th></tr></thead><tbody>";

// 将数据库结果输出到可以查看的表中                  
if ($result->num_rows > 0)
{
      // 输出每一行的数据
      while($row = $result->fetch_assoc())
          {
        echo "<tr><td>
        <button type='button' onclick='dosomethingcrazy(this)'>Try</button>
        </td><td>".$row["DWG_NO"]."</td><td>".$row["Description"]."</td>
                <td>".$row["Profile"]."</td>
                <td><textarea rows='1' cols='3' id='myTextarea' name='something'>0</textarea></td>
                <td>".$row["Length"]."</td>
                <td>".$row["Ib/ft"]."</td>
                <td>".$row["Observ"]."</td></tr>";
      }
} 

// 用户可以填写的表中的最后一行，以便将另一项输入到数据库中                 
echo "<tr><form id='form1' action='insert.php' method='post'>
      <input type='hidden' id='greeting' name='test' value='$category'>
      <td><button type='button' onclick='dosomethingcrazy(this)'>Try</button></td>
      <td><input type='text' name='drawingnum' placeholder='Drawing #'></td>
      <td><input type='text' name='type' placeholder='Type' required></td>
      <td><input type='text' name='profile' placeholder='profile' required></td>
      <td><input type='number' min='0' name='pieces' placeholder='0'></td>
      <td><input type='number' min='0' name='length' placeholder='0' required></td>
      <td><input type='number' min='0' name='ibft' placeholder='0' required></td>
      <td><textarea class='description' oninput = 'auto_grow(this)' type='text' name='description' value='initiate-value'></textarea></td></form></tr>";
echo "</tbody></table></div>";
                    
$con->close();
?>

我遇到问题的更基本部分是这个函数：

function dosomethingcrazy(a)
{
    console.log('hello');
    var $row = a.closest('tr');    // 找到行
    var $text = $row.find('drawingnum').text(); // 找到文本
                            
    // 让我们测试一下
    alert($text);
}

没有被这个按钮调用

<button type='button' onclick='dosomethingcrazy(this)'>Try</button>

我无论如何都无法弄清楚为什么。我最初认为这是一个范围问题，但它应该在范围内。我还尝试了多种不同的从按钮调用函数的方式。非常感谢您们能提供的任何帮助。我尝试使用类名来引用按钮，还尝试了在这个网站上发布的多种调用函数的方式。

Answer 1

在使用jQuery时，您可以通过编写CSS选择器来查找元素。

例如，您有$row = a.closest('tr');，它将找到离a变量引用的任何元素最近的<tr>元素，并且看起来是一个<button>元素。由于a只是一个原始元素，您需要使用jQuery选择它才能在jQuery中使用它。$(a).closest('tr')将解决这个问题。

接下来，您有$row.find('drawingnum')，它将在那个<tr>元素中查找一个<drawingnum>元素。这不是一个真实的元素，也不在您的HTML中。

不过，我看到您有这个：

<input type='text' name='drawingnum' placeholder='Drawing #'>

我猜您想选择这个元素。因此，您需要找到一个具有特定属性值的<input>。在CSS中，您可以使用选择器input[name="drawingnum"]来定位它，这意味着您可以在jQuery中做相同的事情。

这里是全部内容：

var $row = $(a).closest('tr');
var text = $row.find('input[name="drawingnum"]').text();

Answer 2

您的问题出在您的JavaScript函数中。

您混淆了PHP和JavaScript的表示法。在JavaScript中声明变量不需要使用'$'符号。您可能在jQuery中看到了'$'的使用，但您并没有提到您在使用它。

如果您没有使用jQuery，则find()和text()不是方法，您应该使用.querySelector和.value代替。

此外，我认为您无法通过名称选择行，除非在查询中明确添加'[name="whatever"]'。

这是您的函数的一个可工作版本。

  <script>
    function dosomethingcrazy(a)
    {
      // 混淆了php和javascript表示法。
      // javascript不使用'$'符号表示变量。
        console.log('hello');
        var row = a.closest('tr');    // 查找行
        // 您是否使用jquery？如果是，您可以使用find，但如果不是，则使用querySelector。
        // 如果您没有使用库，则使用.value来获取输入值。
        var text = row.querySelector('[name="drawingnum"]').value; // 查找文本

        // 让我们来测试一下
        alert(text);
    }
  </script>

这里有一个jsbin的工作演示。

一个常见的建议是使用开发工具中的控制台。它应该给您一些关于任何JavaScript问题的提示。

另一个额外的警告是确保给每个元素都指定一个唯一的id。您的页面上不应该有重复的id。