<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script> <script src="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/js/locales/bootstrap-datepicker.da.min.js" charset="UTF-8"></script> <link id="bsdp-css" href="https://uxsolutions.github.io/bootstrap-datepicker/bootstrap-datepicker/css/bootstrap-datepicker3.min.css" rel="stylesheet"> <div class="container"> <div class="row clearfix"> <div class="col-md-12 column"> <!-- Nav tabs --> <ul class="nav nav-tabs" role="tablist"> <li role="presentation" class="active"><a href="#generelt" aria-controls="generelt" role="tab" data-toggle="tab">Generelt</a></li> <li role="presentation"><a href="#didaktisk" aria-controls="didaktisk" role="tab" data-toggle="tab">didaktisk</a></li> <li role="presentation"><a href="#diverse" aria-controls="diverse" role="tab" data-toggle="tab">diverse</a></li> <li role="presentation"><a href="#emneindex" aria-controls="emneindex" role="tab" data-toggle="tab">emneindex</a></li> </ul> <!-- Tab panes --> <div class="tab-content"> <div role="tabpanel" class="tab-pane active" id="generelt"> <form class="form-horizontal"> <fieldset> <!-- Form Name --> <legend>Generelt</legend> <div class="form-group"> <label for="titel">Titel:</label> <input type="text" class="form-control" id="titel" placeholder="Titel"> </div> <div class="form-group"> <label for="beskrivelse">Beskrivelse:</label> <textarea class="form-control" rows="5" id="beskrivelse" placeholder="Beskrivelse"></textarea> </div> <div class="form-group"> <label for="forfattere">Forfattere/Bidragydere:</label> <table class="table table-bordered table-hover" id="forfattere"> <thead> <tr> <th class="text-center"> Rolle </th> <th class="text-center"> Forfatter </th> <th class="text-center"> Dato </th> <th class="text-center"> <a class="btn btn-success addRow"><span class="glyphicon glyphicon-plus"/></a> </th> </tr> </thead> <tbody> <tr style="display:hidden"> <td> <input type="text" name="rolle" placeholder="Rolle" class="form-control" /> </td> <td> <input type="text" name="forfatter" placeholder="Forfatter" class="form-control" /> </td> <td> <input type="text" name="dato" palceholder="Dato" class="form-control datepicker" data-provide="datepicker"> </td> <td align="center"> <a class="btn btn-danger removeRow"><span class="glyphicon glyphicon-trash" /></a> </td> </tr> <tr> <td> <input type="text" name="rolle" placeholder="Rolle" class="form-control" /> </td> <td> <input type="text" name="forfatter" placeholder="Forfatter" class="form-control" /> </td> <td> <input type="text" name="dato" palceholder="Dato" class="form-control datepicker" data-provide="datepicker"> </td> <td align="center"> <a class="btn btn-danger removeRow"><span class="glyphicon glyphicon-trash" /></a> </td> </tr> <tr> <td> <input type="text" name="rolle" placeholder="Rolle" class="form-control" /> </td> <td> <input type="text" name="forfatter" placeholder="Forfatter" class="form-control" /> </td> <td> <input type="text" name="dato" palceholder="Dato" class="form-control datepicker" data-provide="datepicker"> </td> <td align="center"> <a class="btn btn-danger removeRow"><span class="glyphicon glyphicon-trash" /></a> </td> </tr> </tbody> </table> </div> <div class="jumbotron"> <div class="checkbox"> <label> <input type="checkbox"> Læringsobjektet er selvstændigt </label> </div> <div class="form-group"> <label for="licensType">Licenstype</label> <input type="text" class="form-control" id="licensType" placeholder="Licenstype"> </div> </div> </fieldset> </form> </div> <div role="tabpanel" class="tab-pane" id="didaktisk"><h3>didaktisk</h3></div> <div role="tabpanel" class="tab-pane" id="diverse"><h3>diverse</h3></div> <div role="tabpanel" class="tab-pane" id="emneindex"><h3>emneindex</h3></div> </div> </div> </div> </div>

$(function () { var i = 1; $(".addRow").click(function () { var html = '<tr><td><input type="text" name="rolle" placeholder="Rolle" class="form-control" /></td><td><input type="text" name="forfatter" placeholder="Forfatter" class="form-control" /></td><td><input type="text" name="dato" placeholder="dato" class="form-control" /></td><td><a class="btn btn-danger removeRow">Slet</a></td></tr>'; $("#forfattere tbody").append(html); }); $( "#forfattere").on( "click", ".removeRow", function () { var $this = $(this); var $tr = $this.closest("tr").remove(); }); $('.datepicker').datepicker({ language: "da" }); });