CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrap
Ajay Kulkarni
Ajay Kulkarni

Reputation: 3039

Appending the data of one html (bootstrap) table to another bootstrap table

I wrote a bootstrap UI as shown in this screen shot:
img
Code is as shown here. When user clicks on accept button in new orders table, then food 1 should move to accepted table. How can I do it? My code isn't working.
Javascript: 

function append() {
        // Code...
        if (!('#btnOne').onclick) {
            var htmlrows = "";
            var htmltablestart = '<table class="table table-hover borderless">';
            htmlrows = htmlrows + '<tr><td>' + foodOne + '</td><td class="pull-right"> <button type="button" class="btn btn-primary" onclick="appendComplete();" id="btnThree">Completed</button> </td><td></tr>';
            var htmltableend = '</table>';
            var htmlTable = htmltablestart + htmlrows + htmltableend;
            ('#acceptedOrdrDiv').append(htmlTable);
            alert('you have accepted the order');
        } else {
            alert('you have not accepted the order');
        }
    }
    function appendComplete() {
        // Code...
        if (!('#btnThree').onclick) {
            var htmlrows = "";
            var htmltablestart = '<table class="table table-hover borderless">';
            htmlrows = htmlrows + '<tr><td>' + foodOne + '</td></tr>';
            var htmltableend = '</table>';
            var htmlTable = htmltablestart + htmlrows + htmltableend;
            ('#completedOrdrDiv').append(htmlTable);
            alert('you have completed the order');
        } else {
            alert('you have not completed the order');
        }
    }

I also want accepted order in new order table to be deleted when clicked on Accept button.

Upvotes: 0

Views: 670

Answers (1)

Alex
Alex

Reputation: 829

HTML:

<div id="acceptedOrdrDiv" class="panel-body" style="overflow-y: auto; height: 90%;">
    <table class="table table-hover borderless accepted-orders">
    </table>
</div>

JQuery:

$('.btn.btn-primary').click(function () {
    var text = $(this).parent().parent().children().filter(':first-child');
    var thisTr = text.parent();
    console.log($('.table.accepted-orders'));
    $('.table.accepted-orders').append('<tr><td>'+text.text()+'</td><td class="pull-right"><button type="button" class="btn btn-primary">Completed</button></td>');
    thisTr.remove();
});

Upvotes: 1

Related Questions