Solo quería agregar un botón que creará una nueva tabla debajo de la primera (máximo 10 veces), pero el código JavaScript que implementé no hace eso como quiero. A continuación se muestra mi HTML y JSS.
function addField(n) { var tr = n.parentNode.parentNode.cloneNode(true); document.getElementById('tbl').appendChild(tr); } <table id="tbl" class="table-bordered table-dark"> <thead> <tr> <th scope="colgroup">Godzina rozpoczęcia</th> <th scope="colgroup">Godzina zakończenia</th> </tr> </thead> <tbody> <td style="vertical-align: top;"> <label for="start-date">Data:</label> <input type="date" id="start" name="data-roz"> <br> <label for="start-time">Godzina:</label> <input type="time" id="godzina1" name="godz-roz"> </td> <td style="vertical-align: top;"> <label for="end-date">Data:</label> <input type="date" id="end" name="data-zakon"> <br> <label for="end-time">Godzina:</label> <input type="time" id="godzina2" name="godz-zakon"> </td> </tbody> </table> <input type="button" class="btn btn-primary" value="+" onclick="addField(this);"/>Debe agregar la tabla copiada al cuerpo del documento, no volver a la tabla:
function addField(n) { var tblClone = n.previousElementSibling.cloneNode(true); document.body.appendChild(tblClone ); } <table id="tbl" class="table-bordered table-dark"> <thead> <tr> <th scope="colgroup">Godzina rozpoczęcia</th> <th scope="colgroup">Godzina zakończenia</th> </tr> </thead> <tbody> <td style="vertical-align: top;"> <label for="start-date">Data:</label> <input type="date" id="start" name="data-roz"> <br> <label for="start-time">Godzina:</label> <input type="time" id="godzina1" name="godz-roz"> </td> <td style="vertical-align: top;"> <label for="end-date">Data:</label> <input type="date" id="end" name="data-zakon"> <br> <label for="end-time">Godzina:</label> <input type="time" id="godzina2" name="godz-zakon"> </td> </tbody> </table> <input type="button" class="btn btn-primary" value="+" onclick="addField(this);"/> var count = 1; function addField(n) { if(count<=5){ var table = n.previousElementSibling.children[0].cloneNode(true); document.getElementById("table-group").appendChild(table); count++; } if(count===5){ document.getElementById('addBtn').style.display='none'; } } <div id="table-group"> <table class="table-bordered table-dark"> <thead> <tr> <th scope="colgroup">Godzina rozpoczęcia</th> <th scope="colgroup">Godzina zakończenia</th> </tr> </thead> <tbody> <tr> <td style="vertical-align: top;"> <label for="start-date">Data:</label> <input type="date" id="start" name="data-roz"> <br> <label for="start-time">Godzina:</label> <input type="time" id="godzina1" name="godz-roz"> </td> <td style="vertical-align: top;"> <label for="end-date">Data:</label> <input type="date" id="end" name="data-zakon"> <br> <label for="end-time">Godzina:</label> <input type="time" id="godzina2" name="godz-zakon"> </td> </tr> </tbody> </table> </div> <input type="button" id="addBtn" class="btn btn-primary" value="+" onclick="addField(this);"/>