<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <script type="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/js/jasny-bootstrap.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasny-bootstrap/3.1.3/css/jasny-bootstrap.css"> <div class="container"> <div class="row"> <h2>Congrats. Your account was created</h2> <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Large Modal</button> <button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#inviteMembers">Invite members</button> </div> <div class="row"> <div class="col-md-6"> <table class="table table-condensed table-bordered"> <thead> <tr> <td> Name </td> <td> Email </td> <td> Actions </td> </tr> </thead> <tbody id="quick-member-list"> <tr> <td>Eduardo</td> <td>edu@my_email.com</td> <td> <div class="btn btn-default btn-danger btn-sm">Del</div> <div class="btn btn-default btn-warning btn-sm">Edit</div> </td> </tr> <tr> <td> <input type="text" id="quick-member-name"> </td> <td> <input type="text" id="quick-member-email"> </td> <td> <div id="btn-quick-include" class="btn btn-default btn-primary btn-sm">Include</div> </td> </tr> </tbody> </table> </div> </div> </div> <!-- Trigger the modal with a button --> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Create a team</h4> </div> <div class="modal-body"> <label for="team-name">Team name</label> <input type="text" id="team-name" name="team_name" class="form-control"> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">Skip this step</button> <button type="button" class="btn btn-success" data-dismiss="modal">Create</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="inviteMembers" role="dialog"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Invite members</h4> </div> <div class="modal-body"> <fieldset> <label for="member-name">Member name</label> <input type="text" id="member-name" name="member_name" class="form-control"> <label for="member-name">Member email</label> <input type="text" id="member-email" name="member_email" class="form-control"> <div class="big-center"> <span >OR</span> </div> Upload a CSV file with name and email of team members <div class="fileinput fileinput-new" data-provides="fileinput"> <span class="btn btn-default btn-file"><span>Choose file</span><input type="file" /></span> <span class="fileinput-filename"></span><span class="fileinput-new">No file chosen</span> </div> </fieldset> </div> <div class="modal-footer"> <button type="button" class="btn btn-link" data-dismiss="modal">Skip this step</button> <button type="button" class="btn btn-success" data-dismiss="modal">Proceed</button> </div> </div> </div> </div> <!-- <div style='display:none'> <div id="tpl_rows"> <tr> <td>${name}</td> <td>${email}</td> <td> <div class="btn btn-default btn-danger btn-sm">Del</div> <div class="btn btn-default btn-warning btn-sm">Edit</div> </td> </tr> </div> </div> --> <script type="javascript" src="https://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>

.big-center { width: 100%; font-size: x-large; text-align:center; }

MyMock = { } MyView = { list : [], init : function() { $('#quick-member-name').val('xpto'); $('#btn-quick-include').on("click", MyView.addNewEntry) }, addNewEntry : function () { var reg = { name : $('#quick-member-name').val(), email : $('#quick-member-email').val() }; MyView.createNewRow(reg); MyView.list.push(reg); }, createNewRow : function(reg) { // get the number of elements var l = $('#quick-member-list'); var ultimo = $('#quick-member-list TR:last'); var myTRList = $('#quick-member-list TR'); var i = myTRList.length; var penultimo = i - 2; var myTPL = '';// $('#tpl_rows').html(); myTPL = '<tr> <td>${name}</td> <td>${email}</td> <td> <div class="btn btn-default btn-danger btn-sm">Del</div> <div class="btn btn-default btn-warning btn-sm">Edit</div> </td></tr>'; $(ultimo).before($.tmpl( myTPL, { "name" : reg.name, "email" : reg.email })); } } MyModel = { name : "", email : "" } $(document).ready(function(){ MyView.init(); }); MyClass = { adiciona : function () { var ultimo = $('#myTable TR:last'); var myTRList = $('#myTable TR'); var i = myTRList.length; var penultimo = i - 2; $(ultimo).before($.tmpl( "<tr><td>${Name}</td></tr>", { "Name" : "xpto " + i })); if (i>0) { //console.log($('#myTable TR:eq('+(i-2)+')').html()); } else { //cosole.log("nao deu " + penultimo); } /* $.tmpl( "<tr><td>${Name}</td></tr>", { "Name" : "ddddddd" }).appendTo( "#myTable TR:last *:before" ); */ } };