如何使用頁面上的許多元素動態觸發 onclick？

Question

我從數據庫中檢索到的值很少。 我需要使用一次單擊更新產品信息 function。 每次點擊只會填充第一個產品信息。 我想動態加載。 我可以用 onclick function 做嗎？ 請幫我。

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

我的腳本：

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

首先，您將參數傳遞給 function，但 function 定義中沒有參數。

其次，您的 DOM 導航語法完全錯誤。 使用.closest()和.find()等方法進行導航。

第三，ID 必須是唯一的。 對重復元素使用類。

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