如何从HTML表格插入数据到MySQL数据库 [英] How to insert data to a mysql database from an HTML Table
问题描述
我有一个包含信息的 HTML表格。现在，我可以使用JavaScript按钮添加行和删除行。我还可以使用添加行按钮直接将信息添加到数据库，并使用删除行按钮从数据库中删除数据。但我不想使用这些按钮，因为我认为最好有另一个按钮将所有信息一次插入数据库。因此，我需要关于如何从HTML表格中读取信息并将其数据插入到mysql数据库的建议。
I have a HTML table with information. Right now I can add rows and delete the rows with a button using javascript. I can also add the information to the database directly using the Add Rows button, and remove the data from the database with the Delete Rows button. But I don't want to use those buttons because I think it is better to have another button for inserting all the information to the database at once. So I need suggestions on how to read information from a HTML table and inserts its data to a mysql database.
以下是代码：
现在，代码不会将数据插入数据库。
Here is the code: Right now the code does not insert data to the database.
<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代码来添加动态content..wow ..
现在你想把这个内容插入到MySQL表中..你可以...
在做小代码修改之前做你的代码..
首先你应该理解插入一些东西到数据库，你有一个HTML表单元素..
和控件..你可以添加动态的HTML表单元素如下
Yes.. You have good JavaScript code to adding dynamic content..wow.. Now you want to insert that content to MySQL table..yes you can... Before that small modification to do your code.. First you should understand insert something to database, you have a HTML form element.. and controls..you can add dynamically HTML form element as following
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[]' />";
}
使您的删除方法保持不变，但仅更改此行
keep your delete method same, but change this line only
var i=1
to
var i=0
现在改变你的HTML代码，如下所示，
确保你的表体标签有一个名为dataTable，
的id，并且移除你的复选框，把表单元素包括你的table..bang ...
Now Change your HTML code as following , make sure your table body tag has a id named "dataTable", and remove you check box ,put form element to cover your table..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数据库，然后创建表
//下面是示例 p>
// create mysql database and then create table // following is the example
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语言向数据库插入数据..
确保你应该创建数据库连接..
greate ... now this is the interesting part.. I use the php language to insert data to database.. make sure you should create database connection..
<?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')");
}
}
?>
我认为这篇文章对所有人都很重要..
I think this post is important to all ..
这篇关于如何从HTML表格插入数据到MySQL数据库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
