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

【问题标题】：How to insert data to a mysql database from an HTML Table如何将数据从 HTML 表插入 mysql 数据库
【发布时间】：2013-10-17 08:38:19
【问题描述】：

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

【问题讨论】：

您应该发布一些代码以获得合理的帮助。
我不相信您的 deleteRow() 调用实际上是根据上述代码从数据库中删除任何内容。
是的，它现在没有从数据库中添加/删除，但我不想那样做。相反，我想在 HTML 表中插入所有信息时插入数据库。
没有服务器从 HTML 表中读取的概念。表格只是呈现数据的一种很好的可视化方式。你想要的是一个 HTML form。
另外值得注意的是，一次将所有信息插入数据库不一定“更好”；这取决于你想要做什么。最后，这应该不言而喻，但是请在插入数据库之前请验证您的数据。

标签： javascript php html sql database

【解决方案1】：

是的..你有很好的 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”的 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>

//创建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 ;

太棒了……现在这是有趣的部分…… 我使用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')");        
        }

    }   
?>

我认为这篇文章对所有人都很重要..

【讨论】：

【解决方案2】：

首先你应该分离客户端和服务器端：

客户端是浏览器，HTML 表存储在“浏览器”的内存中，所有编辑都在客户端的计算机上完成，您可以断开互联网连接并仍然使用此页面 - 它会起作用（添加/删除行）

服务器端在远程服务器上工作，不知道将哪些行/列插入到客户端的 HTML 表中。

因此，您需要一些机制在完成后将数据从客户端发送到服务器。

第二项：HTML表格和关系数据库表格是不同的实体，HTML表格只是数据的视觉表现，关系数据库表格是特定数据库中的实体（你可以有多个数据库，每个数据库可以有多个表）存储在磁盘上（通常在服务器上）。

HTML 表可以有动态行/列，但 RD 表只能有动态行，而不是列，（不完全正确，一些 RDBMS 允许删除列）。

最后 - 你应该解决 2 个问题：

从客户端发送数据到服务器，这可以通过在<table>周围放置<form action="phpscript.php">...</form>并添加“提交”按钮来实现，不要忘记在一些“隐藏”字段中存储列/行的数量, 还有 - 我想你需要这个单元格中的数据，所以在每个 HTML 表格单元格中添加<input>
在服务器上存储数据 - 对于 mysql，您确实可以使用动态列添加/删除，但您也可以只使用数据存储 ROW 和 COLUMN 索引，例如：

0, 0, dataincell_0_0
1, 0, 数据incell_1_0

【讨论】：