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 append（）函数为行添加一个开始标记，然后是单元格的开头标记，信息，然后结束这样的标记。

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＆＃39; .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();

不确定最终看起来像什么，但你也可以自己调用构建函数。

将数据添加到html表中

2 个答案: