on button click i add items in td which i have created with 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>');

    });

I have tried this but can't get.

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

3 Answers

1
Mamun On Best Solutions

You have to pass this in the function like:

onclick="Editproduct(this)". Then use that passed this in the function.

Try the following way:

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>

1
some On

The problem is how you bind the event to the button. With the way you have done it, this is referring to window and not the button. You could add this in the function call: Instead of onclick="Editproduct()" use onclick="Editproduct(this)" and change the Edutproduct to accept and use that argument.

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

0
Chirag Shah On

Lets assume that this is your HTML code

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

Use this jQuery code to get what you want to achieve. I hope this will help you achieve what you want.

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


  • I have added class to button - mybtn
  • I am binding click even to button using .on() event of table using its id. jQuery .on() - w3school