Добавление данных в таблицу html

Question

Я хочу добавить данные в формате, приведенном ниже, в таблицу html, используя только jQuery. Я раньше не использовал 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>"); 
    }` 

используя для цикла, чтобы пройти через столько же элементов, как у вас есть в вашем массиве

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

Не уверен, что это похоже в конце, но вы также можете сделать функцию сборки самостоятельно.