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。

尝试以下方式：

＆＃13;

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);
}

＆＃13;

table td {
  border: 1px solid black;
}

＆＃13;

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

＆＃13;

Answer 2

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

＆＃13;

 $("#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);
    }

＆＃13;

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

＆＃13;

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);
}

小提琴链接：JsFiddle

我已将课程添加到按钮 - mybtn
我绑定点击甚至按钮使用其id的表的.on（）事件。 jQuery .on() - w3school

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

3 个答案: