Подскажите пожалуйста Если мне требуется вывести таблицу из mysql, с последующим динамическим редактированием ячеек... Я так понимаю это сразу в сторону JS нужно смотреть. Как вывести таблицу из mysql через php на веб страницу это понятно, непонятно как её динамически редактировать... Подскажите где можно почитать нужную литературу или примеры, именно на динамическое обновление таблиц mysql, ну или хотя бы просто на динамическое обновление.
прочесть можно в интернете если прямо в таблице и без перезагрузки - то да без js не сделать есть готовые библиотеки таблиц - которые динамически берут данные редактируют итд ... DataTable например итд в общем случае - выводите значение например в <input type='text'> вешаете на него обработчик на изменение или по нажатию кнопок, при срабатывании обработчика - шлете необходимые данные на сервер
@Reken, для "затравки": DOM-дерево (javascript.ru). Там чуток про структуру таблиц есть. Начиная со слов "Важный «особый случай» – работа с таблицами".
Помогите пожалуйста мне разобраться. Кое что в динамической таблице у меня уже получилось, но всё равно не совсем что нужно. Делаю так: Содержание страницы с таблицей: Код (Text): <html> <body> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> </head> <form id="myForm"> <table> <tr><td>Значение 1</td><td>Значение 2</td><td></td></tr> <tr><td><input type='text' placeholder='1' input id='num1'></td><td><input type='text' placeholder='1' input id='num2'></td><td><input type="submit" value="Изменить"></td></tr> <table/> </form> <div id="content"> </div> <script> $(document).ready(function(){ $('#myForm').submit(function(){ $.ajax({ type: "POST", url: "script.php", data: {num1: $("#num1").val(), num2: $("#num2").val()}, success: function(html){ $("#content").html(html); } }); return false; }); }); </script> </body> </html> Содержание обработчика: Код (Text): <?php $number1 = $_REQUEST['num1']; $number2 = $_REQUEST['num2']; echo <<<HTML <table> <tr><td>Значение 1</td><td>Значение 2</td><td></td></tr> <tr><td><input type='text' placeholder='$number1' input id='num1'></td><td><input type='text' placeholder='$number2' input id='$num2'></td></tr> <table/> HTML; ?> Всё это делает следующее: Я заношу нужные цифры в поля значение1 и значение2, после нажатия кнопки "Изменить", начинает работать javascript и через ajax передает в обработчик нужные значения методом POST. Далее в блоке <div id="content"> отображается результат обработчика, то есть табличка с нужными значениями. Получается сверху таблица в которой я вношу нужные значения, а снизу таблица в которой отображаются эти значения. Я не могу понять, как сделать это всё в одной таблице... Что бы javascript не выводил новую таблицу снизу, а вносил изменения placeholder в уже выведенную таблицу (верхнюю). Надеюсь суть вопроса изложил понятно...
После вненсения - зачем вы опять таблицу формируете и выводите? ведь она и так у вас уже есть? И значения там нужные - которые вы передаете на беки если вы сделаете обновление старницы- то значения останутся теми же. Единственное при первоначальном формировании таблицы - заносите в соответствующие input value="" значения из БД
Я всё равно недопонимаю. Поправьте меня пожалуйста где я ошибаюсь... Допустим я не буду выводить новую таблицу. Допустим javascript отправит в обработчик нужные значения. Но как эти значения будут отображать в уже существующей таблице? Как они туда попадут? Тем более без обновления страницы...
зачем им туда попадать? вот у вас в ячейке <input ...... - вы ввели число 5 нажали сохранить... оно аяксово сохранилось - страница не перезагрузилась - вы это же число 5 и видите в поле ввода
А если я усложню задачу для себя. Допустим у меня таблица, которая будет брать значения placeholder из БД. Я внесу нужные цифры в таблицу, нажму отправить. Javascript отправит нужные значения в обработчик (другой php файл). Обработчик в свою очередь обновит значения в БД И я до сих пор не могу понять. Как в таблице, в которой у меня отображаются placeholder, без перезагрузки страницы вытащить измененные значения placeholder из БД
С value получилось... Теперь пытаюсь разобраться в следующем: Допустим в начале php скрипта задаю следующие вводные Код (Text): $value1 = '20'; $value2 = '30'; $value3 = $value1 + $value2; echo <<<HTML <form id="myForm"> <table> <tr><td><input type='text' input id='num1' value="$value1"></td><td><input type='text' input id='num2' value="$value2"></td><td><input type='text' value="$value3"></td><td><input type="submit" value="Изменить"></td></tr> <table/> </form> <script> $(document).ready(function(){ $('#myForm').submit(function(){ $.ajax({ type: "POST", url: "script.php", data: {value1: $("#num1").val(), value2: $("#num2").val()}, success: function(html){ $("#content").html(html); } }); return false; }); }); </script> Получается, что третья ячейка равняется $value3 (сумма $value1 и $value2). Когда выполняется ajax значение в первых двух ячейках ($value1 и $value2) меняется. А как можно поменять значение $value3 без перезагрузки страницы? Можете пожалуйста подсказать? P.S. script.php содержит обработчик, что бы в БД обновить информацию.
Ну. если все же нужно обновлять какие то значения в процессе, есть два пути 1) В обработчике который обновляет БД рассчитываете нужные новые значения - и отдаете это js например {'id234' : 345} в js берете идентификаторы переданные и обновляете там значения 2) Можно всю таблицу с обновленными значениями сформировать и так же отдать заменив всю старую
А по поводу 2 варианта, я правильно понял: 1) В обработчике нарисовать таблицу с измененными значениями 2) Через div content вывести таблицу обработчика на изначальной странице index.php (откуда запустили javascript) Если я правильно понял, тогда не могу понять следующее: Допустим на первой странице (index.php), я через content вывел таблицу обработчика, разве после этого её опять можно будет редактировать?
поняли верно.... а почему нельзя то? вообще на беке значит пишете функцию формирования таблицы с текущими значениями полей из БД - show_table() например при открытии html страницы в div id='content' явно ничего не пишете, зато вызываете js функцию, которая обращается к беку и показывает таблицу - для этого у нас есть show_table при редактировании данных - шлете на бек данные - записываете в бд и тут же вызываете show_table() а ее результат отдаете А для работы с динамически отрисовываемыми элементами используете обработчик Код (Javascript): $('body').on('click','selector', function(){... тут ваш код})
Я сделал немного иначе: Содержание index.php Код (Text): <?php $value1 = '20'; $value2 = '30'; echo <<<HTML <html> <body> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> </head> <div id="content"> <form id="myForm"> <table> <tr><td>Значение 1</td><td>Значение 2</td><td></td></tr> <tr><td><input type='text' input id='num1' value="$value1"></td><td><input type='text' input id='num2' value="$value2"></td></td><td><input type="submit" value="Изменить"></td></tr> <table/> </form> </div> <script> $(document).ready(function(){ $('#myForm').submit(function(){ $.ajax({ type: "POST", url: "script.php", data: {value1: $("#num1").val(), value2: $("#num2").val()}, success: function(html){ $("#content").html(html); } }); return false; }); }); </script> </body> </html> HTML; ?> Содержание обработчика: Код (Text): <?php $value1 = $_REQUEST['value1']; $value2 = $_REQUEST['value2']; echo <<<HTML <form id="myForm"> <table> <tr><td>Значение 1</td><td>Значение 2</td><td></td></tr> <tr><td><input type='text' input id='num1' value="$value1"></td><td><input type='text' input id='num2' value="$value2"></td></td><td><input type="submit" value="Изменить"></td></tr> <table/> </form> HTML; ?> После этих действий, у меня на странице index.php отображается таблица, которая нарисована в <div id="content">. После того как я нажимаю на кнопку изменить, начинает работать javascript, отправляет в обработчик нужные значения. Обработчик в свою очередь их обрабатывает, и возвращает таблицу в index.php в "content" меняя таблицу которая там уже была. Но если я после этого еще раз пытаюсь отправить значения по кнопке "изменить", то ничего не получается. Просто обновляется страница, и я вижу изначальную таблицу index.php со значениями 20 и 30... Я так понимаю, второй раз не получается изменить таблицу потому что я не использую Код (Text): $('body').on('click','selector', function(){... тут ваш код}) Я правильно понял? P.S. Пока что пробую разобраться без значений из БД
Сделал немного иначе... index.php Код (Text): <html> <body> <head> <meta http-equiv="Content-Type" content="text/html; Charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> </head> <div id="content"> </div> <script> $(document).ready(function(){ $.ajax({ type: "POST", url: "script3.php", data: {value1: $("#num1").val(), value2: $("#num2").val()}, success: function(html){ $("#content").html(html); } }); }); </script> </body> </html> Содержание обработчика: Код (Text): <?php $value1 = $_REQUEST['value1']; $value2 = $_REQUEST['value2']; echo <<<HTML <form id="myForm"> <table> <tr><td>Значение 1</td><td>Значение 2</td><td></td></tr> <tr><td><input type='text' input id='num1' value="$value1"></td><td><input type='text' input id='num2' value="$value2"></td></td><td><input type="submit" value="Изменить"></td></tr> <table/> </form> HTML; ?> Теперь у меня ID content сразу показывает обработчик при загрузке index.php Но поля переменных $value1 и $value2 постоянно "undefined". Так как мой обработчик, не захватывает введенные значения, потому что у меня не получается "прикрутить" $('body').on('click','selector', function(){ в мой javascript для захвата динамических цифр... Можете пожалуйста подсказать как в моем JS правильно добавить "динамический захват цифр"