如何从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.

我有一个带有信息的HTML表格。现在我可以使用javascript添加行并使用按钮删除行。我还可以使用add Rows按钮将信息直接添加到数据库中，并使用Delete Rows按钮从数据库中删除数据。但我不想使用这些按钮，因为我认为最好有另一个按钮，以便立即将所有信息插入到数据库中。因此，我需要关于如何从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>

2 个解决方案

#1

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

来

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，并删除您的复选框，将表单元素放置到表中。

<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 ..

我认为这篇文章对大家都很重要。

#2

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表存储在“浏览器”内存中，所有的编辑工作都在客户机的计算机上完成，您可以断开与internet的连接，仍然使用这个页面——它将工作(添加/删除行)

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 table and Relational Database table are 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:

最后，你应该解决两个项目:

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 cell

通过将数据从客户机发送到服务器，可以通过放置

来实现。形成>并添加“submit”按钮，不要忘记在一些“hidden”字段中存储大量的列/行——我想在这个单元格中需要数据，所以在每个HTML表单元格中添加
Storing 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:

在服务器上存储数据——对于mysql，可以使用动态列添加/删除，但也可以使用数据存储行和列索引，比如:

0, 0, dataincell_0_0
1, 0, dataincell_1_0

#1

  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[]' />";
        }