javascript - 从 HTML 表到 mysql 数据库

标签 javascript php html mysql sql

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

最佳答案

这里是如何使用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 脚本将记录插入数据库。

关于javascript - 从 HTML 表到 mysql 数据库,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19298712/

相关文章:

javascript - 对Chrome浏览器中的错误的 promise 和处理

javascript - 以更简单的方式获取树数据结构的深度

php - 关闭站点并踢出用户进行升级的最佳方法是什么?

javascript - 运行 AJAX 代码时,行总和不会更新,直到 F5 刷新

html - 使用 CSS 将表单提交按钮的宽度指定为与 anchor 的宽度相同的问题

javascript - 使用 javascript 更改输入值 - 出了什么问题?

javascript - index.html :1 Uncaught ReferenceError: VARIABLE is not defined at HTMLDivElement. onclick

Javascript camel case split for json 结果

javascript - 如何为 Django 网站创建 facebook 登录?

php - 换页时可以发送数据吗[分页]