Javascriptオブジェクトを使用して動的にhtmlテーブルを作成する

Question

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

これは、3つの内部オブジェクト、行を表すそれぞれと、オブジェクトを返し、次のようにしてください：Object {1：Object、2：Object、3：Object}。各内部オブジェクトには、email、fname、lname、password、unameの各フィールドがあります。

ここからどこに行くのかわかりません。私はこれをJavaScript配列に変換する必要があると思いますが、私は素晴らしい例は見つけていません。このデータをテーブルに入れるには、私は何をする必要がありますか？

テーブルの各行は、適切なフィールド見出しを持つ内部オブジェクトの1つに対応する必要があります。また、各行には、テーブルから削除するか、別のデータベーステーブルに値を追加する2つのボタンが必要です。

Answer 1

ここでは、jQueryを使用してデータに基づいてHTMLマークアップを構築する方法の1つです。ここで

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

私はそれが動作するようになった方法です。

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