logo标签列表

如何将HTML表格中的数据插入到MySQL数据库中

javascriptphphtmlsqldatabase
5
我有一个包含信息的HTML表格。目前，我可以使用javascript添加行并使用按钮删除行。我还可以直接使用“添加行”按钮将信息添加到数据库中，并使用“删除行”按钮从数据库中删除数据。但我不想使用这些按钮，因为我认为最好有另一个按钮一次性将所有信息插入数据库。因此，我需要关于如何从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>
1
你应该发布一些代码以获得合理的帮助。 - webduvet
根据上述代码，我不相信你的deleteRow()调用实际上从数据库中删除了任何内容。 - Chris Rasco
是的，现在它没有从数据库中添加/删除，但我不想这样做。相反，我希望在HTML表格上插入所有信息时将其插入到数据库中。 - EM10
1
服务器没有从HTML表中读取的概念。表只是一种漂亮的可视化数据呈现方式。你需要的是一个HTML 表单。 - acobster
1
还值得注意的是，将所有信息一次性插入数据库并不一定“更好”；这取决于您要做什么。最后，请务必在数据库插入之前验证您的数据，这应该是不言而喻的。 - acobster
我认为您可以使用JSON，在这里 https://stackoverflow.com/a/23770671/2080202 - Hossam
2个回答
7

是的，您有良好的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

to 

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

    }   
?>

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

1
首先，您应该将客户端和服务器端分开：
客户端是浏览器，HTML表格存储在“浏览器”的内存中，在客户端计算机上进行所有编辑，您可以断开与互联网的连接，仍然可以使用此页面 - 它将工作（添加/删除行）。
服务器端在远程服务器上工作，并不知道哪些行/列被插入到客户端的HTML表格中。
因此，您需要一些机制将完成后的数据从客户端发送到服务器。
第二点：HTML表格和关系数据库表是不同的实体，HTML表格只是数据的可视化表示，关系数据库表是特定数据库中的实体（您可以有几个数据库，每个数据库可以有多个表），存储在磁盘上（通常在服务器上）。
HTML表格可以具有动态行/列，但RD表只能具有动态行，而不能具有动态列（不完全正确，某些RDBMS允许删除列）。
最后 - 您应该解决2个问题：

  1. 将数据从客户端发送到服务器，可以通过在 <table> 周围放置 <form action="phpscript.php">...</form> 并添加“提交”按钮来实现，不要忘记在一些“隐藏字段”中存储列/行的数量，并且 - 我想您需要这些单元格中的数据，因此在每个 HTML 表单单元格中添加 <input>

  2. 在服务器上存储数据 - 对于 mysql，您确实可以使用动态列添加/删除，但也可以仅存储包含数据的 ROW 和 COLUMN 索引，例如:

0, 0, dataincell_0_0
1, 0, dataincell_1_0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接