У меня есть таблица HTML с информацией. Прямо сейчас я могу добавить строки и удалить строки с помощью javascript. Я также могу добавить информацию в базу данных напрямую с помощью кнопки « Добавить строки» и удалить данные из базы данных с помощью кнопки « Удалить строки» . Но я не хочу использовать эти кнопки, потому что думаю, что лучше иметь еще одну кнопку для вставки всей информации в базу данных сразу. Поэтому мне нужны предложения о том, как читать информацию из таблицы HTML и вставлять ее данные в базу данных mysql.
Вот код: прямо сейчас код не вставляет данные в базу данных.
<HTML> <HEAD> <TITLE> Add/Remove dynamic rows in HTML table </TITLE> <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name="chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = rowCount; var cell3 = row.insertCell(2); cell3.innerHTML = rowCount; var cell4 = row.insertCell(3); cell4.innerHTML = rowCount; var cell5 = row.insertCell(4); cell5.innerHTML = rowCount; var cell6 = row.insertCell(5); cell6.innerHTML = rowCount; } function deleteRow(tableID) { try { var table = document.getElementById(tableID); var rowCount = table.rows.length; for(var i=1; i<rowCount; i++) { var row = table.rows[i]; var chkbox = row.cells[0].childNodes[0]; if(null != chkbox && true == chkbox.checked) { table.deleteRow(i); rowCount--; i--; } } }catch(e) { alert(e); } } </SCRIPT> </HEAD> <BODY> <INPUT type="button" value="Add Row" onclick="addRow('dataTable')" /> <INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" /> <TABLE id="dataTable" border="1"> <tr> <th><INPUT type="checkbox" name="chk[]"/></th> <th>Make</th> <th>Model</th> <th>Description</th> <th>Start Year</th> <th>End Year</th> </tr> </TABLE> </BODY> </HTML> Да .. У вас есть хороший JavaScript-код для добавления динамического содержимого. .. Теперь вы хотите вставить этот контент в таблицу MySQL. Да, вы можете … До этого небольшого изменения сделать свой код. Сначала вы должны понимать вставку что-то в базу данных, у вас есть элемент HTML-формы .. и элементы управления. Вы можете добавить динамический элемент HTML-формы следующим образом:
function addRow(tableID) { var table = document.getElementById(tableID); var rowCount = table.rows.length; var row = table.insertRow(rowCount); var cell1 = row.insertCell(0); var element1 = document.createElement("input"); element1.type = "checkbox"; element1.name="chkbox[]"; cell1.appendChild(element1); var cell2 = row.insertCell(1); cell2.innerHTML = "<input type='text' name='item[]'>"; var cell3 = row.insertCell(2); cell3.innerHTML = "<input type='text' name='price[]' />"; var cell4 = row.insertCell(3); cell4.innerHTML = "<input type='text' name='qty[]' />"; }
сохраните метод удаления, но измените только эту строку
var i=1
в
var i=0
Теперь измените свой HTML-код следующим образом: убедитесь, что тэг тела тега имеет идентификатор с именем «dataTable», и вы удалите флажок, поместите элемент формы, чтобы покрыть таблицу .bang …
<INPUT type="button" value="Add Row" onClick="addRow('dataTable')" /> <INPUT type="button" value="Delete Row" onClick="deleteRow('dataTable')" /> <form action="" method="post" name="f"> <TABLE width="425" border="1"> <thead> <tr> <th width="98"></th> <th width="94">Item</th> <th width="121">Price</th> <th width="84">Qty</th> </tr> </thead> <tbody id="dataTable"> </tbody> </TABLE> <INPUT type="submit" value="Insert" name="submit" /> </form>
// создаем базу данных mysql, а затем создаем таблицу // следующим примером
CREATE TABLE `your_table_name` ( `id` int(11) NOT NULL auto_increment, `item` varchar(200) NOT NULL, `price` varchar(200) NOT NULL, `qty` varchar(200) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;
greate … теперь это интересная часть. Я использую язык php для вставки данных в базу данных. убедитесь, что вы должны создать подключение к базе данных ..
<?php if($_POST[submit]) { foreach ($_POST['item'] as $key => $value) { $item = $_POST["item"][$key]; $price = $_POST["price"][$key]; $qty = $_POST["qty"][$key]; $sql = mysql_query("insert into your_table_name values ('','$item', '$price', '$qty')"); } } ?>
Я думаю, что этот пост важен для всех.
Прежде всего, вы должны отделить клиентскую и серверную сторону:
Клиент является браузером, а таблица HTML хранится в памяти «браузера», вся редакция выполняется на компьютере клиента, вы можете отключиться от Интернета и все еще использовать эту страницу – и он будет работать (добавлять / удалять строки)
Сервер работает на удаленном сервере и не знает, какие строки / столбцы вставляются в HTML-таблицу клиента.
Таким образом, вам понадобится механизм отправки данных с клиента на сервер после завершения.
Второй элемент: таблица HTML и таблица реляционной базы данных – это разные сущности, HTML-таблица – это только визуальное представление данных, таблица реляционной базы данных – сущность в конкретной базе данных (вы можете иметь несколько баз данных, каждая база данных может иметь несколько таблиц), хранящихся на диске (в сервер обычно).
Таблица HTML может иметь динамические строки / столбцы, но таблица RD может иметь только динамические строки, а не столбцы (не совсем верно, некоторые RDBMS позволяют удалять столбцы).
Наконец, вы должны решить 2 вопроса:
Отправляя данные от клиента к серверу, это может быть достигнуто путем размещения <form action="phpscript.php">...</form> вокруг <table> и добавления к нему кнопки «отправить», не забудьте сохранить количество столбцов / rows в некоторых «скрытых» полях, также – я полагаю, вам нужны данные в этих ячейках, поэтому добавьте <input> в каждую ячейку таблицы HTML
Хранение данных на сервере – для mysql вы действительно можете использовать динамические столбцы add / remove, но также можете просто хранить ROW и COLUMN индекс с данными, например:
0, 0, dataincell_0_0 1, 0, dataincell_1_0