jquery - Turn each child of a selector into a row in my table -
i have div
has multiple uls
. each ul
has button goes it. when user clicks button i'd remove ul
, siblings
, , parent
main div
create table
represents removed ul
such item name , quantity each li
displayed row in table
append table
secondary div
.
as have now, if ul
has multiple lis
, of item names , quantities displayed in single row.
here full screen result.
code:
$(document).ready(function () { $('.accptordr').click(function () { var text = $(this).closest('fieldset').children().first(); console.log(text); var thistr = text.parent(); var itemname = $(this).parent().prev().find('.list-group-item').justtext(); var badgehtml = $("<div/>").append($(this).parent().prev().find('.badge').clone()).html(); var result = $("<div/>").append('<br>'); /*var finalresult = badgehtml + result;*/ /*var result = badgehtml.add('<br/>'); var finalresult = result.appendto('result')*/ console.log($('.table.accepted-orders')); $('.accepted-orders').append('<div class="well well-sm order col-md-5" style="width: 48%; height: 280px;"><div>time remaining: 20 minutes</div> <div class="pull-left">' + text.html() + '</div><table class="table table-striped table-bordered"><thead><tr><th>item</th><th>quantity</th><th>note</th></tr></thead><tr><td> ' + itemname + '</td> <td> ' + badgehtml + ' </td> </tr> </table> <div class="pull-right"> <button type="button" class="btn btn-primary btns">ready</button> </div></div>'); $('#nword3').remove(); $(".btns").click(function () { alert("food ready"); }); }); }); jquery.fn.justtext = function () { return $(this).clone() .children() .remove() .end() .text(); };
how can fix item name , quantity each li
displayed separate row in table
?
when order has multiple items, make each item has own row in resulting table, need elements , iterate on them rather jset getting text parent:
working jsfiddle
$(document).ready(function () { $('.accptordr').click(function () { var fieldset = $(this).closest('fieldset'); var text = fieldset.children().first(); var lis= fieldset.find('li'); var items = []; lis.each(function(){ var itemname = $(this).justtext(); var qty = $(this).find('.badge').text(); var note = ''; // note here? var badge = '<span class="badge pull-right">'+qty+'</span>' items.push('<tr><td>'+itemname+'</td><td>'+badge+'</td><td>'+note+'</td></tr>' ) }); var result = $("<div/>").append('<br>'); $('.accepted-orders').append('<div class="well well-sm order col-md-5" style="width: 48%; height: 280px;"><div>time remaining: 20 minutes</div> <div class="pull-left">' + text.html() + '</div><table class="table table-striped table-bordered"><thead><tr><th>item</th><th>quantity</th><th>note</th></tr></thead>'+items.join('')+'</table> <div class="pull-right"> <button type="button" class="btn btn-primary btns">ready</button> </div></div>'); fieldset.parent().remove(); $('.accepted-orders').children().last().find(".btns").click(function () { alert("food ready"); }); }); });
Comments
Post a Comment