按钮点击时,JavaScript函数无效
P粉665427988
P粉665427988 2024-04-05 13:14:53
0
2
1541

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

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

<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>

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

P粉665427988
P粉665427988

全部回复(2)
P粉460377540

在使用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();
P粉593536104

您的问题出在您的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。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板