使用Javascript对象动态创建html表

我试图用MySQL表中的数据动态创建一个HTML表。表中的数据不是静态的，因此，当数据库表被更新时，HTML表需要更新

以下是我的PHP代码：

 $sql = "SELECT * FROM pendingusers";
$result = $conn->query($sql);
$response = array(); //$result->fetch_all(MYSQLI_ASSOC);

if ($result->num_rows > 0) {
    $i = 1;
    while($row = $result->fetch_assoc()) //$response[] = $row; 

{    

    $response[$i]['fname'] = $row["firstname"];
    $response[$i]['lname'] = $row["lastname"];
    $response[$i]['uname'] = $row["username"];
    $response[$i]['email'] = $row["email"];
    $response[$i]['password'] = $row["password"];
    $i++;
}

 echo json_encode($response);   

} else {
    echo "0 results";
}
$conn->close();

?>

下面是调用PHP文件的Javascript函数：

function load() {   

            // var users = null;    
            $.post(
            "Returnsmedb.php",
            function (response) {
               console.log(response);
            }, 'json'
        );           
}

这将返回一个对象，其中包含三个内部对象，每个对象表示一行，如下所示：object{1:object，2:object，3:object}。每个内部对象都有字段email、fname、lname、password和uname

我不知道接下来该怎么办。我认为这需要转换成JavaScript数组，但我还没有找到很好的例子。我需要做什么才能将这些数据放入表中

---

表的每一行都应该对应于一个具有适当字段标题的内部对象。此外，每一行都需要有两个按钮，用于将其从表中删除或将值添加到另一个数据库表中。

以下是使用jQuery基于数据构建HTML标记的方法之一

风险值数据=[ { 电邮：abc@def.ghi, fname:abc， 名称：def， 密码：abcDef， 联埃援助团：德发BC },{ 电邮：1abc@def.ghi, fname:2abc， lname:3def， 密码：4abcDef， 联埃特派团：公元前5年 },{ 电邮：6abc@def.ghi, fname:7abc， lname:8def， 密码：9abcDef， uname:0defAbc } ]; var表体=； var列=[]； //创建标题记录。 tableBody=tableBody+； 数据[0]中的forvar属性{ ifdata[0]。hasOwnPropertyprop{ //附加属性，如电子邮件、fname、lname等。 tableBody=tableBody++prop+； //还保留一个列列表，可用于以后从“数据”对象获取列值。 柱体.pushprop； } } tableBody=tableBody+； //创建数据行。 data.forEachfunctionrow{ //在表中为数据数组中的每个元素创建新行。 tableBody=tableBody+； columns.forEachfunctioncell{ //单元格是每列的属性名称。 //行[cell]为我们提供该单元格的值。 tableBody=tableBody++行[单元格]+； }; tableBody=tableBody+； }; $usersTable.appendtableBody；

---

这是我如何让它工作的

function load() {   


            $.post(
            "Returnsmedb.php",
            function (response) {

                var block = []

                index = 0;
                for (var item in response){

                    var objectItem = response[item];

                  var firstname = objectItem.fname;
                  var lastname = objectItem.lname;
                  var username = objectItem.uname;
                  var email = objectItem.email;
                  var password = objectItem.password;
                  var deny = document.createElement("input");
                  deny.type = "checkbox";
                  deny.className = "chk";
                  deny.name = "deny";
                  deny.id = "deny";
                  var approve = document.createElement("input");
                  approve.type = "checkbox";
                  approve.className = "chk";
                  approve.name = "approve";
                  var moreinfo = document.createElement("input");
                  moreinfo.type = "checkbox";
                  moreinfo.className = "chk";
                  moreinfo.name = "moreinfo";

                    block.push(firstname);
                    block.push(lastname);
                    block.push(username);
                    block.push(email);
                    block.push(password);
                    block.push(deny);
                    block.push(approve);
                    block.push(moreinfo);

                    dataset.push(block);
                    block = [];


                }




                 var data = [" First Name", " Last Name "," User Name ", " Email ", "Password", " Deny", "Approve", "More Information"]

                tablearea = document.getElementById('usersTable');
                table = document.createElement('table');
                thead = document.createElement('thead');
                tr = document.createElement('tr');

                for (var i = 0; i < data.length; i++) {
                    var headerTxt = document.createTextNode(data[i]);
                    th = document.createElement('th');
                    th.appendChild(headerTxt);
                    tr.appendChild(th);
                    thead.appendChild(tr);
                }

                table.appendChild(thead);


                for (var i = 0; i < dataset.length; i++) {
                    tr = document.createElement('tr');
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td'));
                    tr.appendChild(document.createElement('td')); //Added for checkbox
                    tr.appendChild(document.createElement('td')); //Added for checkbox
                    tr.appendChild(document.createElement('td')); //Added for checkbox


                    tr.cells[0].appendChild(document.createTextNode(dataset[i][0]));
                    tr.cells[1].appendChild(document.createTextNode(dataset[i][1]));
                    tr.cells[2].appendChild( document.createTextNode(dataset[i][2]));
                    tr.cells[3].appendChild( document.createTextNode(dataset[i][3]));
                    tr.cells[4].appendChild( document.createTextNode(dataset[i][4]));
                    tr.cells[5].appendChild((dataset[i][5])); //
                    tr.cells[6].appendChild((dataset[i][6])); //
                    tr.cells[7].appendChild((dataset[i][7])); //
                    table.appendChild(tr);                   
                }
                tablearea.appendChild(table);


                $('input.chk').on('change', function() {
                if($('this:checked'))
                {
                    var tr =$(this).parents('tr');
                tr.find("input.chk").not(this).each(function(){
                $(this).prop('checked', false);
                });
                }

                });
            }, 'json'
        );           
}

---

您是使用纯JS还是使用库，如JQuery、ExtJS、React等？@Meezaan ud Din$.post是jQueryThis可能对您有用：哦，对不起，我只读了第一部分-甚至没有看到第二部分有$.post。@nageep我尝试过以类似的方式创建一个表，但每次我引用返回的数据响应时，它都会说它没有定义。有什么想法吗？这似乎是可行的。我有点困惑，我实际上是如何从MYSQL表中获取数据的。每次我尝试在load函数之外引用响应对象时，都会得到一个未定义的错误。我意识到响应是函数的一个局部对象，所以我不确定如何克服它。这是一个非常广泛的问题，但这里有一些您应该学习的一般步骤：1。将数据数组从PHP转换为JSON。一旦有了JSON对象，就可以轻松地将其传递到Javascript中。2.由于您希望使用Javascript在表中添加/删除单个记录，因此可能需要在PHP中创建一个AJAX端点，您可以使用JQuery访问该端点。3.完成后，可以在页面的HTML标记中创建按钮，这些按钮调用JQuery函数，通过AJAX调用PHP。