如何从HTML表中将数据插入mysql数据库

Question

I have a HTML table with information. 我有一个包含信息的HTML表格 。 Right now I can add rows and delete the rows with a button using javascript. 现在我可以使用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. 我还可以使用Add Rows按钮直接将信息添加到数据库，并使用Delete Rows按钮从数据库中删除数据。 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表中读取信息并将其数据插入到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>

Answer 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

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

<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.. 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')");        
        }

    }   
?>

I think this post is important to all .. 我认为这篇文章对所有人都很重要。

Answer 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表存储在“浏览器”内存中，所有编辑都在客户端的计算机上完成，您可以断开互联网并仍然使用此页面 - 它将工作（添加/删除行）

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表和Relational Database表是不同的实体，HTML表只是数据的可视化表示，关系数据库表是特定数据库中的实体（可以有几个数据库，每个数据库可以有几个表）存储在光盘上（on服务器通常）。

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 cell 从客户端发送数据到服务器，这可以通过在<table>周围放置<form action="phpscript.php">...</form> <table>并向其添加“submit”按钮来实现，不要忘记存储列数/某些“隐藏”字段中的行也 - 我想你需要在这个单元格中有数据，所以在每个HTML表格单元格中添加<input>
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，你真的可以使用动态列添加/删除，但你也可以只用数据存储ROW和COLUMN索引，如：

0, 0, dataincell_0_0
1, 0, dataincell_1_0

如何从HTML表中将数据插入mysql数据库

问题描述

2 个解决方案

解决方案1
5 2013-11-05 14:48:31

解决方案2
1 2013-10-09 21:40:58

如何从HTML表中将数据插入mysql数据库

问题描述

2 个解决方案

解决方案1 5 2013-11-05 14:48:31

解决方案2 1 2013-10-09 21:40:58

解决方案1
5 2013-11-05 14:48:31

解决方案2
1 2013-10-09 21:40:58