单击“编辑”按钮时如何获得 <td name="pname"> 值

Question

单击按钮时，我在 td 中添加了我用 jQuery 创建的项目。

 $("#ddproduct").click(function () {

         $('#prodcuttable tr:last').after('<tr><td name="pname">' + prodName + '</td> <td>' + prodQty + '</td> <td>' + prodUp + '</td> <td >' + prodQty * prodUp + '</td><td> <button class="btn btn-block btn-primary btn-sm fa fa-edit" onclick="Editproduct()">&nbsp;&nbsp; Edit</button></td></tr>');

    });

我已经试过了，但是无法获取。

function Editproduct()
{
    alert("Hi");
    var ProductName = $(this).closest("tr").find("td[name='pname']").text();
    alert(ProductName);
}

Answer 1

您必须在函数中传递 this，例如：

onclick="Editproduct(this)"。然后在函数中使用传递给 this 的

尝试以下方式：

var i = 1;
$("#ddproduct").click(function () {
  var prodName = 'Product ' + i;
  var prodQty = 3;
  var prodUp = 10;
  $('#prodcuttable tr:last').after('<tr><td name="pname">' + prodName + '</td> <td>' + prodQty + '</td> <td>' + prodUp + '</td> <td >' + prodQty * prodUp + '</td><td> <button class="btn btn-block btn-primary btn-sm fa fa-edit" onclick="Editproduct(this)">Edit</button></td></tr>'); 
  i++;
});

function Editproduct(that)
{
  var ProductName = $(that).closest("tr").find("td[name='pname']").text();
  alert(ProductName);
}

table td {
  border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button id="ddproduct">Add Product</button>
<table id="prodcuttable">
<tbody><tr></tr></tbody>
</table>

Answer 2

问题在于如何将事件绑定到按钮。按照您的操作方式，this 指的是 window 而不是 button.您可以在函数调用中添加 this ：而不是 onclick="Editproduct()" 使用 onclick="Editproduct(this)" 并更改 Edutproduct 以接受并使用该参数。

 $("#ddproduct").click(function () {
 let prodName='Product A', prodQty=1, prodUp=6;
         $('#prodcuttable tr:last').after('<tr><td name="pname">' + prodName + '</td> <td>' + prodQty + '</td> <td>' + prodUp + '</td> <td >' + prodQty * prodUp + '</td><td> <button class="btn btn-block btn-primary btn-sm fa fa-edit" onclick="Editproduct(this)">&nbsp;&nbsp; Edit</button></td></tr>');

    });

    function Editproduct(self)
    {
        var ProductName = $(self).closest("tr").find("td[name='pname']").text();
        alert(ProductName);
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ddproduct">Add</button>
<table id="prodcuttable">
<tr></tr>
</table>

Answer 3

假设这是您的 HTML 代码

<button type="button" id="ddproduct">Click Me</button>
  <table border="1" id="prodcuttable">
    <thead>
      <th>PName</th>
      <th>PQty</th>
      <th>PUp</th>
      <th>PQ*PU</th>
      <th>Button</th>
    </thead>
    <tbody>
      <tr>
        <td name="pname">Alexa</td>
        <td>10</td>
        <td>2</td>
        <td>20</td>
        <td><button class="btn btn-block btn-primary btn-sm fa fa-edit mybtn">Edit</button></td>
      </tr>
    </tbody>
  </table>

使用此 jQuery 代码来获得您想要实现的目标。我希望这能帮助你实现你想要的。

$("#ddproduct").click(function () {    
$('#prodcuttable tbody tr:last').after('<tr><td name="pname" class="pname">Chrome</td> <td>5</td> <td>3</td> <td >15</td><td> <button class="btn btn-block btn-primary btn-sm fa fa-edit mybtn">Edit</button></td></tr>');    
        });

$("#prodcuttable").on("click",".mybtn", Editproduct);

function Editproduct()
{
//     alert("Hi");
    var ProductName = $(this).parent().siblings("[name='pname']").text();
//     console.log(ProductName);
    alert(ProductName);
}

Fiddle Link: JsFiddle

我已将 class 添加到按钮 - mybtn
我使用 table 的 .on() 事件使用它的 ID 将点击绑定到按钮。 jQuery .on() - w3school

单击“编辑”按钮时如何获得 <td name="pname"> 值

How I can get <td name="pname"> values on Edit button click

javascript

jquery

jquery-plugins

jquery-events