單擊按鈕時如何顯示每個`td`內容？

Question

每個附加的tr標簽都會有一個帶有不同數據的td列表。 因此，我想編輯選定的tr標簽並在單擊按鈕時在console中顯示所有td內容。 我認為這很容易，但我以前對此一無所知，請，任何幫助將不勝感激。

 $('.add-el').click(function(){ $('tbody').append(`<tr> <td id="text">red</td> <td id="text">Small</td> <td id="text">6</td> <td id="text">$10.99</td> <td id="text">2021-03-23</td> <td> <button id="edit">Edit</button> <button id="remove">Remove</button> </td> </tr>`); }); $('tbody').on('click','#edit', function(){ // Ex: console.log(I want to show here all td content); }) $("tbody").on('click', '#remove', function () { $(this).closest('tr').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-el">Add Element</button> <table> <tbody></tbody> </table>

Answer 1

您可以使用 jQuery 方法.closest()和 .children( .children()並傳入您要定位的元素類型。 然后，您可以將返回的HTMLCollection傳播到一個array中（ [...HTMLCollection] => 這將返回一個數組），這樣您就可以使用forEach循環遍歷它們並逐個打印它們或執行您希望的任何其他操作。

您遇到了一些問題，其中多個元素具有相同的id 。 當您需要時，寧願使用classes ，因為ids需要是唯一的。

 $('.add-el').click(function(){ $('tbody').append(`<tr> <td class="text">red</td> <td class="text">Small</td> <td class="text">6</td> <td class="text">$10.99</td> <td class="text">2021-03-23</td> <td> <button class="edit">Edit</button> <button class="remove">Remove</button> </td> </tr>`); }); $('tbody').on('click','.edit', function(){ let children = [...$(this).closest('tr').children('td.text')]; children.forEach(function(item, index) { console.log(item.innerHTML); }); }); $('tbody').on('click', '.remove', function () { $(this).closest('tr').remove(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-el">Add Element</button> <table> <tbody></tbody> </table>

您還可以使用 jQuery .text()方法：

$('tbody').on('click','.edit', function(){
  console.log( $(this).closest('tr').children('td.text').text() );
});

但這會使 output 看起來像：

redSmall6$10.992021-03-23

Answer 2

ID 必須是唯一的，否則它們不再是 Id

我將事件處理程序分配給tr然后檢查事件目標。 畢竟，我們對使用tr很感興趣。

 $('.add-el').click(function(){ $('tbody').append(`<tr> <td class="text">red</td> <td class="text">Small</td> <td class="text">6</td> <td class="text">$10.99</td> <td class="text">2021-03-23</td> <td> <button class="edit">Edit</button> <button class="remove">Remove</button> </td> </tr>`); }); //Event handler for tr $('tbody').on('click','tr', function(event){ //Was the remove button clicked if(event.target.matches(".remove")) { //Remove this row $(this).remove(); //Was the edit button clicked }else if(event.target.matches(".edit")) { //Iterate the text elements $(this).find(".text").each(function(){ console.log($(this).text()); //Do whatever else you need here }); //Aletranatively use map let cellVals = $.map($(this).find(".text"), function(e){ return $(e).text(); }); console.log(cellVals.join("|")); } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="add-el">Add Element</button> <table> <tbody></tbody> </table>