javascript - 如何将（通过 javascript）动态创建的 HTML 表的数据发送到 PHP 文件进行处理？

问题描述

（首先，我对 JavaScript 很陌生 - HTML/PHP 我懂一点）

我想将表数据（由 javascript 动态创建 - 取决于数据库中有多少学生）发送到 PHP 文件进行处理。在按下“创建组”按钮后，该表被创建并添加到 HTML-id“create_groups”（包含在 HTML 表单中）。

我尝试为每个表行指定其自己的名称tr.setAttribute('name', students[i][col[0]]);（至少我似乎无法掌握它。

老师.php

        function createTableFromJSON() {
            hideAll();
            document.getElementById('create_groups').style.display = "block";
    
            let con = new XMLHttpRequest(); //Create Object
    
            console.log("1");
    
            con.open("GET", "teacher_check.php", true); //open the connection
    
            con.onreadystatechange = function() { //define Callback function
    
                if (con.readyState == 4 && con.status == 200) {
    
                    console.log("2");
                    console.log(this.responseText);
                    let response = this.responseText;
                    let students = JSON.parse(this.responseText); 
    //Convert String back into JSON object
                    console.log(students);
                    let col = [];
                    for (let key in students[0]) {
                        col.push(key);
                    }
    
                    // CREATE DYNAMIC TABLE.
                    let table = document.createElement("table");
    
                    // CREATE HTML TABLE HEADER ROW USING THE EXTRACTED HEADERS ABOVE.
                    let tr = table.insertRow(-1); // TABLE ROW AT THE END
                    let th = document.createElement("th");
                    th.innerHTML = "SELECT";
                    tr.appendChild(th);
                    for (let i = 0; i < col.length; i++) {
                        let th = document.createElement("th"); // TABLE HEADER.
                        th.innerHTML = col[i];
                        tr.appendChild(th);
    
                    }
    
                    // ADD JSON DATA TO THE TABLE AS ROWS.
                    for (let i = 0; i < students.length; i++) {
                        tr = table.insertRow(-1);
                        var checkbox = document.createElement('input');
                        checkbox.type = "checkbox";
                       
                        
                        console.log(students[i][col[0]]); 
    //this shows the right names
                        
                        tr.appendChild(checkbox);
                        tr.setAttribute('name', students[i][col[0]]);
    
                        
                        for (let j = 0; j < col.length; j++) {
                            let tabCell = tr.insertCell(-1);
                            tabCell.innerHTML = students[i][col[j]];
                            
                        }
                    }
                    // FINALLY ADD THE NEWLY CREATED TABLE WITH JSON DATA TO A CONTAINER.
                    let divContainer = document.getElementById("create_groups");
                    //divContainer.innerHTML = "";
                    divContainer.appendChild(table);
                    document.getElementById("create_groups").submit();
                }
    
            }
    
            con.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //Set appropriate request Header
            con.send(); //Request File Content
        }
    

  function hideAll() {
        document.getElementById('create_groups').style.display = "none";
        
    }

    <input type="button" name="create_groups" value="Create Groups" onclick="createTableFromJSON()">
      
    <form action="create_groups.php" method ="post">
    <div class="container white darken-4" id="create_groups" style="display:none;">
           
            <p>
                    <label>
                        <span>Groupname:</span>
                        <input type="text" name="groupname">
                    </label>
                </p>
                
     <p><button type="submit" name ="submit">Submit</button></p>            
    </div>

create_groups.php

if (isset($_POST['submit'])) {
    $student = $_POST['stud'];
    $groupname = $_POST['groupname'];

   echo $groupname;
   echo $student;
}

我希望能够访问 create_groups.php 文件中的所有学生姓名，这些姓名在表中的另一个 teacher.php 文件中被选中。显然“isChecked”部分还没有实现，因为另一部分还没有工作。
因此，使用正确数据创建表是有效的，而不是传输到 PHP 文件。

标签： javascriptphp

javascript - 如何将（通过 javascript）动态创建的 HTML 表的数据发送到 PHP 文件进行处理？

问题描述

解决方案

推荐阅读