从 HTML 表到 mysql 数据库答案

【问题标题】：From HTML Table to mysql database从 HTML 表到 mysql 数据库
【发布时间】：2013-10-10 14:33:48
【问题描述】：

我有一张包含信息的表格。我可以使用 Javascript添加/删除 HTML 表格的行。我应该如何将表中的信息放入 sql 数据库中？我一直在搜索是否可以使用 javascript 函数 addRow(tableID) 从表中插入数据，但我认为我做不到。请给我一些关于如何解决问题的建议。

这是我的代码：

<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--;
            }
        }
        // Unchecking the header checkbox.
        var row = table.rows[0];
        var chkbox = row.cells[0].childNodes[0];
        chkbox.checked = false;

        }catch(e) {
            alert(e);
        }
    }

    function checkAll(source) {
        var checkboxes = new Array();
        checkboxes = document.getElementsByTagName('input');

        for (var i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = source.checked;
        }
    }

</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" onchange="checkAll(this)" name="chk[]"/></th>
<th>Make</th>
<th>Model</th>
<th>Description</th>
<th>Start Year</th>
<th>End Year</th>
</tr>
</TABLE>

【问题讨论】：

您必须使用 Ajax 来执行此操作。准备好更多关于jQuery和jQuery Ajax的信息。
难道不能用javascript、html和php来做吗？
jQuery 是一个 Javascript 库，如果您使用 Script src 将其添加到您的页面中，您就可以使用它。我对 PHP 知之甚少，不知道这是否可行，但我怀疑它是否可行。 Ajax 为您提供对服务器的异步或同步调用。
您没有义务使用 jQuery。但解决方案是 Ajax :w3schools.com/ajax/tryit.asp?filename=tryajax_first
你不能。您必须使用 php 将数据插入数据库。您可以使用 Ajax 和 PHP 或更好的 JQuery（即 ajax）+ PHP 或使用 post 或 get 方法提交到 php 文件的表单。并从 php 文件中插入数据库。检查此链接w3schools.com/php/php_mysql_insert.asp

标签： javascript php html mysql sql

【解决方案1】：

下面是如何使用jQuery Ajax 调用服务器：

您的 addRow 函数将变为：

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;

    //This passes the first 3 rows values to the insert.php page, in which you will need to retrieve the values and insert them to the Database using PHP
    $.post('insert.php', {
        cell1:rowCount, 
        cell2:rowCount, 
        cell3:rowCount
    });

}

正如评论中提到的，代码会将前 3 行信息发布到 insert.php，它需要处理传递的信息并使用 PHP 脚本将记录插入数据库。

【讨论】：

【解决方案2】：

你可以使用这个功能

function loadXMLDoc(cell1,cell2,cell3 ...) { // Your parametters
    var xmlhttp;

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    //                                   Answer of ProcessingPage.php ^
        }
    }

    xmlhttp.open("GET", "ProcessingPage.php?cell1="+cell1+"&cell2..." , true);
    //              ^POST OR GET method         Add other param  ^
    xmlhttp.send();
}

ProcessingPage.php

<?php
    $cell1 = $_GET['cell1'];
    $cell1 = $_GET['cell2'];
    //...
?>

【讨论】：