[英]How to show each `td` content when a button is clicked?
Each appended tr
tag will have a td
list with a different data.每个附加的
tr
标签都会有一个带有不同数据的td
列表。 So, I want to edit the selected tr
tag and showing all td
content in the console
when a button is clicked.因此,我想编辑选定的
tr
标签并在单击按钮时在console
中显示所有td
内容。 I think this is very easy but I had no idea about this before, Please, any help would be greatly appreciated.我认为这很容易,但我以前对此一无所知,请,任何帮助将不胜感激。
$('.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>
You can use the jQuery methods .closest()
and .children()
and pass in the element types you are targeting.您可以使用 jQuery 方法
.closest()
和 .children( .children()
并传入您要定位的元素类型。 You can then spread the returned HTMLCollection
into an array
( [...HTMLCollection]
=> this returns an array) so you can iterate over them with a forEach
loop and print them one by one or do any other operations you wish.然后,您可以将返回的
HTMLCollection
传播到一个array
中( [...HTMLCollection]
=> 这将返回一个数组),这样您就可以使用forEach
循环遍历它们并逐个打印它们或执行您希望的任何其他操作。
You had a few issues where multiple elements had the same id
.您遇到了一些问题,其中多个元素具有相同的
id
。 When you need that then rather use classes
since ids
need to be unique.当您需要时,宁愿使用
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>
You can also use the jQuery .text()
method:您还可以使用 jQuery
.text()
方法:
$('tbody').on('click','.edit', function(){
console.log( $(this).closest('tr').children('td.text').text() );
});
but that will make the output look like:但这会使 output 看起来像:
redSmall6$10.992021-03-23
IDs must be unique , if not they are no longer Ids ID 必须是唯一的,否则它们不再是 Id
I'd assign the event handler to the tr
then check the event target.我将事件处理程序分配给
tr
然后检查事件目标。 We are interested in working with the tr
after all.毕竟,我们对使用
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.