php 如何从 HTML 表向 mysql 数据库插入数据
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19281312/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to insert data to a mysql database from an HTML Table
提问by EM10
I have a HTML tablewith information. Right now I can add rowsand deletethe rows with a button using javascript. I can also add the information to the database directly using the Add Rowsbutton, and remove the data from the database with the Delete Rowsbutton. 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.
我有一个包含信息的HTML 表格。现在我可以使用 javascript添加行和删除行。我还可以使用“添加行”按钮直接将信息添加到数据库中，并使用“删除行”按钮从数据库中删除数据。但我不想使用这些按钮，因为我认为最好有另一个按钮来一次将所有信息插入到数据库中。所以我需要关于如何从 HTML 表中读取信息并将其数据插入到 mysql 数据库的建议。
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>
回答by user2870117
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
是的..你有很好的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[]' />";
}
keep your delete method same, but change this line only
保持你的删除方法不变，但只改变这一行
var i=1
to
到
var i=0
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...
现在更改你的 HTML 代码如下，确保你的表格主体标签有一个名为“dataTable”的 id，并删除你的复选框，把表单元素放在你的表格上..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>
// create mysql database and then create table // following is the example
// 创建 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 ... now this is the interesting part.. I use the php language to insert data to database.. make sure you should create database connection..
太好了......现在这是有趣的部分..我使用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')");
}
}
?>
I think this post is important to all ..
我认为这篇文章对所有人都很重要..
回答by I?ya Bursov
First of all you should separate client and server side:
首先，您应该将客户端和服务器端分开：
Client is browser, and HTML table is stored in "browser's" memory, all editorial is done on client's computer, you can disconnect from internet and still use this page - and it will work (add/delete rows)
客户端是浏览器，HTML 表存储在“浏览器”的内存中，所有编辑都在客户端的计算机上完成，您可以断开互联网并仍然使用此页面 - 它会起作用（添加/删除行）
Server's side works on remote server and don't know what rows/columns are inserted into client's HTML table.
服务器端在远程服务器上工作，并且不知道将哪些行/列插入到客户端的 HTML 表中。
So, you need some mechanism to send data from client to server, after you finished.
因此，在完成后，您需要某种机制将数据从客户端发送到服务器。
Second item: HTML tableand Relational Database tableare different entities, HTML table is only a visual representation of data, relational database table is entity in specific database (you can have several databases, each database can have several tables) stored on disc (on server usually).
第二项：HTML 表和关系数据库表是不同的实体，HTML 表只是数据的可视化表示，关系数据库表是特定数据库（可以有多个数据库，每个数据库可以有多个表）存储在磁盘（上）中的实体服务器通常）。
HTML table can have dynamic rows/columns, but RD table can have dynamic rows only, NOT columns, (not fairly true, some RDBMS allows removing columns).
HTML 表可以有动态行/列，但 RD 表只能有动态行，而不是列，（不太正确，某些 RDBMS 允许删除列）。
Finally - you should solve 2 items:
最后 - 你应该解决 2 个项目：
Sending data from client to server, this can be achieved via placing
<form action="phpscript.php">...</form>around<table>and adding "submit" button to it, dont forget to store amount of columns/rows in some "hidden" fields, also - I suppose you need data in this cells, so add<input>in each HTML table cellStoring data on server - for mysql you really can go with dynamic columns add/remove, but also you can just store ROW and COLUMN index with data, like:
从客户端发送数据到服务器，这可以通过将可实现
<form action="phpscript.php">...</form>左右<table>和添加“提交”按钮，将它，不要忘记列/行的店铺数量在一些“隐藏”的字段，还-我想你在这个细胞所需要的数据，所以添加<input>在每个 HTML 表格单元格中在服务器上存储数据 - 对于 mysql，您确实可以使用动态列添加/删除，但您也可以只存储 ROW 和 COLUMN 索引与数据，例如：
0, 0, dataincell_0_0 1, 0, dataincell_1_0
