如何使用页面上的许多元素动态触发 onclick？

Question

I have few values retrieved from DB. I need to update the product information using one on click function. Every click only the first product information is being populated. I want to load dynamically. Can I do it with onclick function? please help me.

    <tr>
<td id="product_name">Cheese</td>
<td id="product_id">12547777</td>
<td id="scheduled_time">04:00 PM</td>
<td id="distributor_name">Elle Nutrients</td>
<td id="order_status">Complete</td>
<td><i class="icon text-info fa fa-pencil" style="cursor: pointer;" onclick="addproduct(this.id)"></i></td>
</tr>
<tr>
<td id="product_name">Butter</td>
<td id="product_id">12577788</td>
<td id="scheduled_time">05:00 PM</td>
<td id="distributor_name">Oetker</td>
<td id="order_status">Waiting</td>
<td><i class="icon text-info fa fa-pencil" style="cursor: pointer;" onclick="addproduct(this.id)"></i></td>
</tr>

My script:

function addproduct(){

    var productname = this.$("#product_name").text();
    var productid = this.$("#product_id").text();
    var name = document.getElementById('new_productname');
    name.value = productname;
    var newid = document.getElementById('new_productid');
    newid.value = productid;
}

Answer 1

First, you're passing an argument to the function, but you don't have a parameter in the function definition.

Second, your syntax for DOM navigation is all wrong. Use methods like .closest() and .find() to navigate.

Third, IDs have to be unique. Use classes for repeated elements.

 function addproduct(element) { var row = $(element).closest("tr"); var productname = row.find(".product_name").text(); var productid = row.find(".product_id").text(); $("#new_productname").val(productname); $("#new_productid").val(productid); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table> <tr> <td class="product_name">Cheese</td> <td class="product_id">12547777</td> <td class="scheduled_time">04:00 PM</td> <td class="distributor_name">Elle Nutrients</td> <td class="order_status">Complete</td> <td><i class="icon text-info fa fa-pencil" style="cursor: pointer;" onclick="addproduct(this)">X</i></td> </tr> <tr> <td class="product_name">Butter</td> <td class="product_id">12577788</td> <td class="scheduled_time">05:00 PM</td> <td class="distributor_name">Oetker</td> <td class="order_status">Waiting</td> <td><i class="icon text-info fa fa-pencil" style="cursor: pointer;" onclick="addproduct(this)">X</i></td> </tr> </table> New name: <input id="new_productname"> <br> New ID: <input id="new_productid">