Вопрос:

Как я могу получить значения <td name = "pname"> при нажатии кнопки «Изменить»

javascript jquery jquery-plugins jquery-events

67 просмотра

3 ответа

16 Репутация автора

По нажатию кнопки я добавляю элементы в тд, которые я создал с помощью 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);
}
Автор: Sohail Asghar Источник Размещён: 13.01.2018 06:40

Ответы (3)


1 плюс

33743 Репутация автора

Решение

Вы должны передать 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>

Автор: Mamun Размещён: 13.01.2018 07:03

1 плюс

37046 Репутация автора

Проблема в том, как вы связываете событие с кнопкой. С тем , как вы сделали это, это имеет в виду окно , а не кнопки . Вы можете добавить это в вызов функции: вместо 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>

Автор: some Размещён: 13.01.2018 07:06

0 плюса

18 Репутация автора

Предположим, что это ваш 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 () таблицы, используя ее идентификатор. jQuery .on () - w3school
Автор: Chirag Shah Размещён: 13.01.2018 07:09
Вопросы из категории :
32x32