Die JavaScript-Funktion hat keinen Einfluss auf das Klicken auf die Schaltfläche

Question

Ich habe im Internet gesucht und viele Methoden ausprobiert, bin aber bei einem relativ einfachen Problem hängen geblieben.

Der Code unten ist der vollständige Umfang meiner Frage

<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();
?>

Der grundlegendere Teil meines Problems betrifft diese Funktion:

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

Nicht über diese Schaltfläche aufgerufen

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

Ich kann sowieso nicht herausfinden, warum. Ich dachte zunächst, es handele sich um ein Problem mit dem Umfang, aber es sollte im Umfang liegen. Ich habe auch verschiedene Möglichkeiten ausprobiert, die Funktion über die Schaltfläche aufzurufen. Vielen Dank für jede Hilfe, die Sie leisten können. Ich habe versucht, Klassennamen zu verwenden, um auf die Schaltflächen zu verweisen, und habe auch verschiedene Möglichkeiten zum Aufrufen der auf dieser Site veröffentlichten Funktionen ausprobiert.

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。