使用javascript在HTML表格中显示Json数据 [英] Display Json data in HTML table using javascript

问题描述

我想使用javascript在html表中显示json文件数据，我希望我可以开始这样做的方式。
任何人都可以给我发送示例或教程来开始这样做。 （使用javascript在HTML表格中显示Json URL数据）
表格将有2列。

i want to display json file data in html table using javascript, i want the way i can start doing that. can anyone send me example or tutorials to start doing that. ( Display Json URL data in HTML table using javascript ) the table will have 2 column.

推荐答案

这是一个例如：

http://jsfiddle.net/sEwM6 / 258 /

我修改了一个现有的小提琴（ http://jsfiddle.net/mjaric/sEwM6/ ）更高效一点。要了解有关jQuery中AJAX请求的更多信息，请参阅 http://api.jquery.com/jQuery.ajax/ 。 AJAX请求可以在没有jQuery等库的帮助下完成，但对于初学者来说，使用jQuery会更容易。如果您正在寻求学习Javascript，我建议您查找纯Javascript AJAX请求以了解正在发生的事情（ http：// youmightnotneedjquery.com/#json ）。

I modified an existing fiddle (http://jsfiddle.net/mjaric/sEwM6/) to be a little more efficient. To learn more about AJAX requests in jQuery see http://api.jquery.com/jQuery.ajax/. AJAX requests can be completed without the help of a library such as jQuery, however, it is a little easier for beginners with jQuery. If you are seeking to learn Javascript, I would recommend looking up pure Javascript AJAX requests to understand what is going on (http://youmightnotneedjquery.com/#json).

drawTable和drawRow函数用于将JSON数据写入表中。 jQuery也被用于将文本写入HTML页面。同样，这也可以在没有jQuery的情况下完成。请参阅 http://youmightnotneedjquery.com/#setting_html 。

The drawTable and drawRow functions are used to write the JSON data to the table. jQuery is also being used to write the text to the HTML page. Again, this can be done without jQuery as well. See http://youmightnotneedjquery.com/#setting_html.

$.ajax({
    url: '/echo/json/', //Change this path to your JSON file.
    type: "post",
    dataType: "json",
    //Remove the "data" attribute, relevant to this example, but isn't necessary in deployment.
    data: {
        json: JSON.stringify([
            {
            id: 1,
            firstName: "Peter",
            lastName: "Jhons"},
        {
            id: 2,
            firstName: "David",
            lastName: "Bowie"}
        ]),
        delay: 3
    },
    success: function(data, textStatus, jqXHR) {
        drawTable(data);
    }
});

function drawTable(data) {
    var rows = [];

    for (var i = 0; i < data.length; i++) {
        rows.push(drawRow(data[i]));
    }

    $("#personDataTable").append(rows);
}

function drawRow(rowData) {
    var row = $("<tr />")
    row.append($("<td>" + rowData.id + "</td>"));
    row.append($("<td>" + rowData.firstName + "</td>"));
    row.append($("<td>" + rowData.lastName + "</td>"));

    return row;
}

这篇关于使用javascript在HTML表格中显示Json数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！