CODEWITHSUNDEEP
jquerytwitter-bootstrap
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Turn each child of a selector into a row in my table

I have a div that has multiple uls. Each ul has a button that goes with it. When a user clicks a button I'd like to remove the ul, its siblings, and its parent from the main div then create a table that represents the removed ul such that the item name and quantity from each li is displayed as a row in the table then append the table to a secondary div.

Here's what I have so far

As I have it now, if a ul has multiple lis, all of the item names and quantities are displayed in a single row.

Here is 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 is ready");
        });
    });
});
jQuery.fn.justtext = function () {
    return $(this).clone()
        .children()
        .remove()
        .end()
        .text();
};

How can I fix it so the item name and quantity from each li is displayed as a separate row in the table?

Upvotes: 2

Views: 82

Answers (1)

Wesley Smith
Wesley Smith

Reputation: 19571

When an order has multiple items, to make it so each item has its own row in the resulting table, you need to get the elements and iterate over them rather than jset getting the text from the 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 = ''; // get some 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 is ready");
        });
    });
});

Upvotes: 1

Related Questions