单击按钮时如何显示每个`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>