如何在单击编辑按钮时获取 <td name="pname"> 值答案

【问题标题】：How I can get <td name="pname"> values on Edit button click如何在单击编辑按钮时获取 <td name="pname"> 值
【发布时间】：2018-06-22 13:56:41
【问题描述】：

点击按钮时，我在 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);
}

【问题讨论】：

请添加您的 HTML。
没有 HTML。编辑按钮也是在中使用 Jquery 创建的

标签： javascript jquery jquery-plugins jquery-events

【解决方案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>

【讨论】：

先生，我无法以这种方式创建按钮，我也必须使用 jquery 创建按钮请检查下面代码中的 laste $('#prodcuttable tr:last').after(' ' + prodName + ' ' + prodQty + ' ' + prodUp + ' ' + prodQty * prodUp + ' ');
只想在最后一个中使用编辑按钮获得第一个值
@SohailAsghar，上面的解决方案就是这样做...单击最后一个td 中的Edit 按钮，给出第一个td 的文本。
谢谢先生这是我想做的。
@SohailAsghar，不客气。如果有帮助，请采纳答案。

【解决方案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>

【讨论】：

先生，我无法以这种方式创建按钮，我也必须使用 jquery 创建按钮请检查下面代码中的 laste $('#prodcuttable tr:last').after(' ' + prodName + ' ' + prodQty + ' ' + prodUp + ' ' + prodQty * prodUp + ' ');
只想在最后一个中使用编辑按钮获取第一个值
@SohailAsghar 我以为你可以弄清楚如何更新代码并添加 this，但我现在已经在示例中更新了它。
谢谢先生这是我想做的。

【解决方案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
我正在使用表格的 .on() 事件使用其 ID 将单击绑定到按钮。 jQuery .on() - w3school

【讨论】：

先生，我无法以这种方式创建按钮，我也必须使用 jquery 创建按钮请检查下面代码中的 laste $('#prodcuttable tr:last').after(' ' + prodName + ' ' + prodQty + ' ' + prodUp + ' ' + prodQty * prodUp + ' ');
只想在最后一个中使用编辑按钮获取第一个值
请再次检查小提琴并回答。我希望我已经解决了你的问题