将动态 HTML 表中的数据保存到 MySql 数据库答案

【问题标题】：Saving Data from Dynamic HTML Table to MySql Database将动态 HTML 表中的数据保存到 MySql 数据库
【发布时间】：2020-04-17 07:07:38
【问题描述】：

我将其用作我网站的参考。我想将表的生成数据保存到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>

【问题讨论】：

您可以使用 AJAX 方法 POST/GET 将数据传输到 php 页面并像查询一样保存。
像stackoverflow.com/questions/10431987/… 一样循环遍历表格，然后在循环中尝试类似stackoverflow.com/questions/17075082/… 的操作。当您拥有该数组时，通过ajax 发送它，然后根据您的要求使用。
谢谢大家，我只想找到解决这些问题的方法。

标签： javascript php html mysql

【解决方案1】：

继您之前的问题和这个新的更新问题之后，我整理了一个演示，我希望它会被证明是有用的。做出了某些假设（您需要将数据输入到某些字段中，而不仅仅是记录表行号）

如果您将其保存为 PHP 脚本并在浏览器中运行，您可以检查控制台以查看 Fetch 请求的结果。您可以使用该 Fetch 请求将数据保存到 db。

<?php
    if( $_SERVER['REQUEST_METHOD']=='POST' ){
        $sql='insert into `table` (`make`,`model`,`description`,`start-year`,`end-year`) values (?,?,?,?,?)';
        $payload=$_POST;
        $payload['sql']=$sql;
        exit( json_encode( $payload ) );
    }
?>
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>Add/delete table rows - save to db</title>
        <script>

            document.addEventListener('DOMContentLoaded',(e)=>{

                const tbl=document.getElementById('dataTable');
                const fields=['make','model','description','start-year','end-year'];

                Array.from( document.querySelectorAll('input[type="button"]') ).forEach( bttn=>{
                    bttn.addEventListener('click',function(e){
                        switch( this.name ){
                            case 'add':
                                let tr=tbl.querySelector('tbody').insertRow();
                                let input=document.createElement('input');
                                    input.type='checkbox';
                                    input.name='chk[]';
                                    input.value=1;

                                tr.insertCell().appendChild( input );

                                fields.forEach( ( field, index )=>{
                                    input=document.createElement('input');
                                    input.type='text';
                                    input.name=field;
                                    input.value=index+','+tbl.rows.length;
                                    tr.insertCell().appendChild( input );
                                });
                            break;

                            case 'del':
                                Array.from( tbl.querySelectorAll('input[type="checkbox"]:checked') ).forEach( chk=>{
                                    tbl.querySelector('tbody').removeChild( chk.parentNode.parentNode )
                                });
                            break;

                            case 'save':
                                Array.from( tbl.querySelectorAll('input[type="checkbox"]:checked') ).forEach( chk=>{
                                    /* find all form elements for the row and send XHR request to server to save data */
                                    let data=new FormData();
                                    Array.from( chk.parentNode.parentNode.querySelectorAll('input') ).forEach( input=>{
                                        if( fields.includes( input.name ) )data.append( input.name, input.value );
                                    })

                                    /* using FETCH, send form data to server */
                                    fetch( location.href,{ method:'post', mode:'no-cors', credentials:'include', body:data } ).then( json=>{
                                        console.info( json )
                                    }).catch( err=>{
                                        alert( err )
                                    });
                                });
                            break;
                        }
                    });
                });
            });
        </script>
        <style>
            table{width:80%;border:1px solid black;border-collapse: separate;background:rgba(0,50,150,0.25);color:white;}
            td{border:1px dotted rgba(0,0,0,0.5);margin:2px;padding:0.5rem;background:white;color:black}
        </style>
    </head>
    <body>
        <form method='post'>
            <input type='button' name='add' value='Add row' />
            <input type='button' name='del' value='Delete row' />
            <input type='button' name='save' value='Save to db' />
        </form>

        <table id='dataTable'>
            <thead>
                <tr>
                    <th>&nbsp;</th>
                    <th>Make</th>
                    <th>Model</th>
                    <th>Description</th>
                    <th>Start Year</th>
                    <th>End Year</th>
                </tr>
            </thead>
            <tbody><!-- dynamically generated content --></tbody>
        </table>
    </body>
</html>

【讨论】：