Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> </head> <body> <div class="container text-center text-white"> <div class="row pt-5"> <div class="col-lg-8 mx-auto"> <h1 class="display-4">jQuery add rows to table</h1> <p class="font-italic mb-0">Using jquery & Bootstrap 4, dynamically add and remove table rows. </p> <p class="font-italic">Snippet by <a class="text-white" href="https://bootstrapious.com/snippets"> <u>Bootstrapious</u> </a> </p> </div> </div> </div> <div class="container py-5"> <div class="row"> <div class="col-lg-7 mx-auto"> <div class="card rounded-0 border-0 shadow"> <div class="card-body p-5"> <!-- Bootstrap table--> <div class="table-responsive"> <table class="table" id="tabulka1"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td></td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td></td> </tr> </tbody> </table> </div> <!-- Add rows button--> <a class="btn btn-primary rounded-0 btn-block insertRow" data-for="tabulka1" href="#">Add new row</a> </div> </div> </div> </div> <div class="row"> <div class="col-lg-7 mx-auto"> <div class="card rounded-0 border-0 shadow"> <div class="card-body p-5"> <!-- Bootstrap table--> <div class="table-responsive"> <table class="table" id="tabulka2"> <thead> <tr> <th scope="col">#</th> <th scope="col">First</th> <th scope="col">Last</th> <th scope="col">Handle</th> <th scope="col"></th> </tr> </thead> <tbody> <tr> <th scope="row">1</th> <td>Mark</td> <td>Otto</td> <td>@mdo</td> <td></td> </tr> <tr> <th scope="row">2</th> <td>Jacob</td> <td>Thornton</td> <td>@fat</td> <td></td> </tr> </tbody> </table> </div> <!-- Add rows button--> <a class="btn btn-primary rounded-0 btn-block insertRow" data-for="tabulka2" href="#">Add new row</a> </div> </div> </div> </div> </div> </body>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
body { background: #0083B0; background: -webkit-linear-gradient(to right, #0083B0, #00B4DB); background: linear-gradient(to right, #0083B0, #00B4DB); min-height: 100vh; } .form-control::placeholder { font-style: italic; font-size: 0.85rem; color: #aaa; }
CSS
Autoformát
CSS reset
Až na konci
$(function () { $(".insertRow").on("click", function (event) { event.preventDefault(); table = $("#"+this.dataset.for); var newRow = $("<tr>"); var cols = ''; // Table columns cols += '<th scrope="row">' + table.find("tr").length + '</th>'; cols += '<td><input class="form-control rounded-0" type="text" autocomplete="off" name="produkt[]" placeholder="Vyplnte Cislo produktu"></td>'; cols += '<td><input class="form-control rounded-0" type="text" autocomplete="off" name="mnozstvo[]" placeholder="Vyplnte mnozstvo"></td>'; cols += '<td class="text-end"><button class="btn btn-sm" title="zmazat riadok" id ="deleteRow"><span class="material-icons md-22" style="color:red">remove_circle_outline</span></button></td>'; // Insert the columns inside a row newRow.append(cols); // Insert the row inside a table table.append(newRow); }); // Remove row when delete btn is clicked $("table").on("click", "#deleteRow", function (event) { $(this).closest("tr").remove(); }); });
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>