將數據添加到html表中

Question

我想僅使用jQuery將數據以下面給出的格式添加到html表中。我之前沒有使用過jQuery。任何人都可以幫助我。

數據：

var data = [ 
    addStudentData("Isaac Netwon", "isanew1", "secret", "1", "en"), 
    addStudentData("Thales", "thales1", "secret", "1", "en"), 
    addStudentData("Pythagoras", "pythag1", "secret", "1", "es"), 
    addStudentData("Albert Einstein", "albein1", "secret", "1", "es"), 
    addStudentData("Euclid", "euclid1", "secret", "1", "es"), 
    addStudentData("Blaise Pascal", "blapas1", "secret", "1", "es"), 
    addStudentData("Alan Turing", "alatur1", "secret", "1", "es"), 
    addStudentData("Ada Lovelace", "adalov1", "secret", "1", "en"), 
    addStudentData("Blaise Pascal", "blapas1", "secret", "1", "es"), 
    addStudentData("Benjamin Banneker", "benban1", "secret", "1", "en"), 
    addStudentData("John von Neumann", "johneu1", "secret", "1", "es") ] 

功能：

function addStudentData(name, user, pass, gen, lan) { 
return {"name":name, "username":user, "password":pass, "gender":gen, "language":lan}; } 

Answer 1

可以jQuery的追加（）函數來追加的開口標籤爲一排，然後開始標記的細胞，信息，然後結束這樣的標籤。

var obj = {name:"bill", username:"billy", password:"pass", gender:"gen", language:"lan"}; var obj2 = {name:"bob", username:"bobby", password:"pass2", gender:"gen2", language:"lan2"}; var data = []; data.push(obj); data.push(obj2); populate(data);

function populate(array){ 
     $("#table").append("<tr><td>" + array[1].name + "</td><td>" + array[1].username + "</td></tr>"); 
    }` 

使用for循環要經過許多個元素，你的陣列

Answer 2

在有使用您已經創建的函數創建一個新的功能和使用jQuery的.append()和.each()。

function addStudentData(name, user, pass, gen, lan) { 
    return {"name":name, "username":user, "password":pass, "gnder":gen, "language":lan}; 
} 
function build() { 
    var data = [ 
      addStudentData("Isaac Netwon", "isanew1", "secret", "1", "en"), 
      addStudentData("Thales", "thales1", "secret", "1", "en"), 
      addStudentData("Pythagoras", "pythag1", "secret", "1", "es"), 
      addStudentData("Albert Einstein", "albein1", "secret", "1", "es"), 
      addStudentData("Euclid", "euclid1", "secret", "1", "es"), 
      addStudentData("Blaise Pascal", "blapas1", "secret", "1", "es"), 
      addStudentData("Alan Turing", "alatur1", "secret", "1", "es"), 
      addStudentData("Ada Lovelace", "adalov1", "secret", "1", "en"), 
      addStudentData("Blaise Pascal", "blapas1", "secret", "1", "es"), 
      addStudentData("Benjamin Banneker", "benban1", "secret", "1", "en"), 
      addStudentData("John von Neumann", "johneu1", "secret", "1", "es") 
     ], 
     $parentTag = $(".yourParentTag"), //replace with your own selector 
     $table = $(document.createElement("table")), 
     $thead = $(document.createElement("thead")), 
     $tbody = $(document.createElement("tbody")), 
     $headRow = $(document.createElement("tr")); 

    // Append table elements together. 
    $table.append($thead); 
    $table.append($tbody); 
    $thead.append($headRow); 
    $parentTag.append($table); 
    $thead.find("tr").addClass("headerRow"); 


    // Creates the the table header from the object key 
    $.each(data[0], function (i, v) { 
     var $th = $(document.createElement("th")).text(i); 
     $(".headerRow").append($th); 
    }); 

    // Outter each creates the rows for the body 
    $.each(data, function() { 
     var $row = $(document.createElement("tr")); 

     //Inner each creates the cells in the table 
     $.each(this, function (i, v) { 
      $td = $(document.createElement("td")).text(v); 
      $row.append($td); 
     }); 
     // Appends the row to the table body. 
     $tbody.append($row); 
    }); 
} 
// Call the build function. 
build(); 

不太確定這最終看起來像什麼，但你也可以使構建函數自我調用。