0

我有一张信息表。我可以使用 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>

4

2 回答 2

1

你可以使用这个功能

JS

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();
}

处理页面.php

<?php
    $cell1 = $_GET['cell1'];
    $cell1 = $_GET['cell2'];
    //...
?>
于 2013-10-10T14:46:55.523 回答
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 脚本将记录插入数据库。

于 2013-10-10T14:44:19.683 回答