javascript - 如何在“编辑”按钮单击上获取 值

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="编辑产品(此)"。然后在函数中使用传递的 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>