HTML-Tabelle dynamisch mit Javascript-Objekt erstellen

Question

Ich versuche, eine HTML-Tabelle mit Daten aus einer MySQL-Tabelle dynamisch zu erstellen. Die Daten in der Tabelle sind nicht statisch und daher muss die HTML-Tabelle aktualisiert werden, wenn die Datenbanktabelle vorhanden ist.

Hier meine PHP-Code ist:

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

?> 

Hier ist meine Javascript-Funktion, die PHP-Datei aufzurufen:

function load() { 

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

Dieses ein Objekt zurückgibt, mit drei Innen-Objekte, die jeweils eine Reihe darstellt, so: Objekt {1: Objekt, 2: Objekt, 3: Objekt}. Jedes innere Objekt hat die Felder email, fname, lname, passwort, uname.

Ich bin mir nicht sicher, wohin ich von hier aus gehen soll. Ich denke, dass dies in ein JavaScript-Array konvertiert werden muss, aber ich habe keine großartigen Beispiele gefunden. Was muss ich tun, um diese Daten in eine Tabelle zu übertragen?

Jede Zeile der Tabelle sollte einem der inneren Objekte mit entsprechenden Feldüberschriften entsprechen. Außerdem muss jede Zeile über zwei Schaltflächen verfügen, die sie aus der Tabelle löschen oder die Werte einer anderen Datenbanktabelle hinzufügen.

Answer 1

Hier ist eine der Möglichkeiten, wie Sie mithilfe von jQuery HTML-Markup basierend auf Ihren Daten erstellen können.

var data = [ 
 
{ 
 
    email: "abc@def.ghi", 
 
    fname: "abc", 
 
    lname: "def", 
 
    password: "abcDef", 
 
    uname: "defAbc" 
 
},{ 
 
    email: "1abc@def.ghi", 
 
    fname: "2abc", 
 
    lname: "3def", 
 
    password: "4abcDef", 
 
    uname: "5defAbc" 
 
},{ 
 
    email: "6abc@def.ghi", 
 
    fname: "7abc", 
 
    lname: "8def", 
 
    password: "9abcDef", 
 
    uname: "0defAbc" 
 
} 
 
]; 
 

 
var tableBody = ""; 
 

 
var columns = []; 
 

 
// Create the header record. 
 
tableBody = tableBody + "<tr>"; 
 
for(var prop in data[0]) { 
 
    if(data[0].hasOwnProperty(prop)) { 
 
    // Append properties such as email, fname, lname etc. 
 
    tableBody = tableBody + ("<th>" + prop + "</th>"); 
 
    
 
    // Also keep a list of columns, that can be used later to get column values from the 'data' object. 
 
    columns.push(prop); 
 
    } 
 
} 
 

 
tableBody = tableBody + "</tr>"; 
 

 
// Create the data rows. 
 
data.forEach(function(row) { 
 
    // Create a new row in the table for every element in the data array. 
 
    tableBody = tableBody + "<tr>"; 
 

 
    columns.forEach(function(cell) { 
 
    // Cell is the property name of every column. 
 
    // row[cell] gives us the value of that cell. 
 
    tableBody = tableBody + "<td>" + row[cell] + "</td>"; 
 
    }); 
 
    
 
    tableBody = tableBody + "</tr>"; 
 
}); 
 

 
$("#usersTable").append(tableBody);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<table id="usersTable"> 
 

 
</table>

Answer 2

Hier ist, wie ich es zu arbeiten.

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