Работа с массивами и таблицей.
Есть такая таблица.
<!doctype html> <html lang="ru"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script type="text/javascript" src="script.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Kost Artem</title> </head> <body> <button type="button" class="btn btn-primary" onclick="window.location='add.html'">Add new book</button> <table class="table table-bordered table-striped"> <thead> <tr> <th scope="col"><span>▼</span>Title</th> <th scope="col"><span>▼</span>Description</th> <th scope="col"><span>▼</span>Actions</th> </tr> </thead> <tbody> <tr> <td id="td1">Cell 1</td> <td>Cell 2</td> <td style="text-align: center"> <button type="button" id="edit">Edit</button> <button type="button" id="delete">Delete</button> </td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td></td> </tr> <tr> <td>Cell 7</td> <td>Cell 8</td> <td></td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td></td> </tr> </tbody> </table> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> </body> </html> И такая форма которая должна добавлять элементы в таблицу. <!doctype html> <html lang="ru"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/style.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <title>Add page</title> </head> <body> <form> <div class="form-group"> <label for="formGroupExampleInput">Title</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Title" required oninvalid="this.setCustomValidity('Це поле повинно бути заповнене!')" oninput="setCustomValidity('')"> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Description"></textarea> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Active?</label> </div> <button type="button" class="btn btn-light" >Save</button> <button type="submit" class="btn btn-light" onclick="window.location='index.html'">Back</button> </form> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script> </body> </html> И желательно все это сделать через массив. Кто-то знает как єто сделать без серверной части? |
Byrylka,
идеи должны быть у вас, пишите код или поищите на форуме, с десяток вариантов наверняка есть. |
Цитата:
Я сегодня искал целый день и никак не могу найти то что нужно. Что я сумел понять что такое можно реализовать через PHP и MYSQL. Но мне єтого не нужно. Подскажите пожалуйста. А то под конец дня я уже отчаялся |
|
Цитата:
|
добавление строк в таблицу
Byrylka,
ввести Title и Description, нажать Save <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $("form").on("click", "[type='button']", add); function add() { var tr = $("<tr>").appendTo("tbody"); $(".form-control").each(function() { $("<td>", { html: this.value }).appendTo(tr); this.value = "" }); $("<td>", { html: '<button type="button" id="edit">Edit</button><button type="button" id="delete">Delete</button>' }).appendTo(tr); } }); </script> </head> <body> <table class="table table-bordered table-striped"> <thead> <tr> <th scope="col"><span>▼</span>Title</th> <th scope="col"><span>▼</span>Description</th> <th scope="col"><span>▼</span>Actions</th> </tr> </thead> <tbody> <tr> <td id="td1">Cell 1</td> <td>Cell 2</td> <td style="text-align: center"> <button type="button" id="edit">Edit</button> <button type="button" id="delete">Delete</button> </td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td></td> </tr> <tr> <td>Cell 7</td> <td>Cell 8</td> <td></td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td></td> </tr> </tbody> </table> <form> <div class="form-group"> <label for="formGroupExampleInput">Title</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Title" required oninvalid="this.setCustomValidity('Це поле повинно бути заповнене!')" oninput="setCustomValidity('')"> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Description"></textarea> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Active?</label> </div> <button type="button" class="btn btn-light" >Save</button> <button type="submit" class="btn btn-light" onclick="window.location='index.html'">Back</button> </form> </body> </html> |
Цитата:
Спасибо! |
Цитата:
|
Смотрите. В строке 46-47 есть две кнопки (пост 6). И это они должны добавляться каждый раз, а не просто слово "Edit"
Спасибо |
Цитата:
написать в кавычках то что вам нужно? строка 24 смотрите снова пост №6 |
Действительно работает.
Кнопка Delete удаляет строку. Но скрипт не работает на уже новых кнопках которые добавляются. Как усправить? я знаю что уже надоел Вам, но подскажите function remove(){ this.closest('tr').style.display = "none"; } var elems = document.getElementsByTagName('button'); for (var i = 0; i < elems.length; i++) { elems[i].addEventListener("click", remove, true); } |
Byrylka,
id уникально, поэтому пример будет через класс и делегирование ... ждите. |
удаление строки таблицы
Byrylka,
удаление для кнопок с классом delete строка 29 и 31 классы добавлены в строки 24 и 55 <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $("form").on("click", "[type='button']", add); function add() { var tr = $("<tr>").appendTo("tbody"); $(".form-control").each(function() { $("<td>", { html: this.value }).appendTo(tr); this.value = "" }); $("<td>", { html: '<button type="button" class="edit">Edit</button><button type="button" class="delete">Delete</button>' }).appendTo(tr); } $("table").on("click", ".delete", del); function del() { $(this).parents("tr").remove() } }); </script> </head> <body> <table class="table table-bordered table-striped"> <thead> <tr> <th scope="col"><span>▼</span>Title</th> <th scope="col"><span>▼</span>Description</th> <th scope="col"><span>▼</span>Actions</th> </tr> </thead> <tbody> <tr> <td id="td1">Cell 1</td> <td>Cell 2</td> <td style="text-align: center"> <button type="button" class="edit">Edit</button> <button type="button" class="delete">Delete</button> </td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td></td> </tr> <tr> <td>Cell 7</td> <td>Cell 8</td> <td></td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td></td> </tr> </tbody> </table> <form> <div class="form-group"> <label for="formGroupExampleInput">Title</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Title" required oninvalid="this.setCustomValidity('Це поле повинно бути заповнене!')" oninput="setCustomValidity('')"> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Description"></textarea> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Active?</label> </div> <button type="button" class="btn btn-light" >Save</button> <button type="submit" class="btn btn-light" onclick="window.location='index.html'">Back</button> </form> </body> </html> |
|
Для красоты лучше между тегами кнопок Edit и Delete в строке 24 вставить пробел
|
редактирование строк таблицы
Цитата:
Byrylka, добавлено редактирование строк, через туже форму для добавления. <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> $(function() { $("form").on("click", "[type='button']", add); function add() { var tr = trEdit ? trEdit.empty() : $("<tr>").appendTo("tbody"); trEdit = null; $(".form-control").each(function() { $("<td>", { html: this.value }).appendTo(tr); this.value = "" }); $("<td>", { html: '<button type="button" class="edit">Edit</button> <button type="button" class="delete">Delete</button>' }).appendTo(tr) } $("table").on("click", ".delete", del); function del() { $(this).parents("tr").remove() } $("table").on("click", ".edit", editor); var trEdit; function editor() { trEdit = $(this).parents("tr"); trEdit.find("td:lt(2)").each(function(i) { $(".form-control").eq(i).val(this.textContent) }) } }); </script> </head> <body> <table class="table table-bordered table-striped"> <thead> <tr> <th scope="col"><span>▼</span>Title</th> <th scope="col"><span>▼</span>Description</th> <th scope="col"><span>▼</span>Actions</th> </tr> </thead> <tbody> <tr> <td id="td1">Cell 1</td> <td>Cell 2</td> <td style="text-align: center"> <button type="button" class="edit">Edit</button> <button type="button" class="delete">Delete</button> </td> </tr> <tr> <td>Cell 4</td> <td>Cell 5</td> <td></td> </tr> <tr> <td>Cell 7</td> <td>Cell 8</td> <td></td> </tr> <tr> <td>Cell 10</td> <td>Cell 11</td> <td></td> </tr> </tbody> </table> <form> <div class="form-group"> <label for="formGroupExampleInput">Title</label> <input type="text" class="form-control" id="formGroupExampleInput" placeholder="Title" required oninvalid="this.setCustomValidity('Це поле повинно бути заповнене!')" oninput="setCustomValidity('')"> </div> <div class="form-group"> <label for="exampleFormControlTextarea1">Description</label> <textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Description"></textarea> </div> <div class="form-group form-check"> <input type="checkbox" class="form-check-input" id="exampleCheck1"> <label class="form-check-label" for="exampleCheck1">Active?</label> </div> <button type="button" class="btn btn-light" >Save</button> <button type="submit" class="btn btn-light" onclick="window.location='index.html'">Back</button> </form> </body> </html> |
Рони,
ОГРОМНОЕ СПАСИБО!! |
Часовой пояс GMT +3, время: 22:15. |