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

Posted 2023-05-09

【中文标题】如何在单击编辑按钮时获取 <td name="pname"> 值

【英文标题】：How I can get <td name="pname"> values on Edit button click

【发布时间】：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 创建的

【参考方案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 + '    编辑 ');

只想在最后一个

中使用编辑按钮获取第一个 值

请再次检查小提琴并回答。我希望我已经解决了你的问题