Ajax響應未填充INSIDE HTML <table> 標簽

Question

不能完全確定我在哪里出錯，但是我希望響應的內容填充在html標簽中。 我想首先添加表標簽，標題。 然后讓函數填充表格標記的內部。 最后關閉桌子。 但是這里有些不對勁。

沒有錯誤正在生成。 所有數據都顯示在頁面上，但不會顯示在表格標簽內，因此可以應用CSS類。

HTML正文

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="./assets/javascript/getdata.js"></script>
    <link rel="stylesheet" href="./assets/css/style.css">

</head>
<body>
    <div class="page-header">
        <h1>Data Table</h1>
    </div>
    <div id="ufo">ajax_response_goes_here</div>
</body>
</html>

JAVASCRIPT

function displayrecipes() {

    $.ajax({
            type: "GET",
            url: "https://data_url",
            dataType: "json"
        })
        .done(function (response) {

            $('#ufo').append("<table id='ufo-table'>")
            $('#ufo').append("<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>")

            for (var i = 0; i < 10; i++) {

                $('#ufo').append("<tr><td>" + i + "</td><td>" + response[i].spaceships +
                    "</td><td>" + response[i].planets + "</td></tr>")
            }

            $('#ufo').append("</table>")
        })
}

displayrecipes()

表格標簽中沒有任何響應數據。 相反，它似乎出現在表標簽的外面。

Answer 1

而不是多次附加，您應該聲明一個變量並向其附加html。 完成附加html之后，您最終應該將字符串附加到div標簽。

var content="<table id='ufo-table'>";
    content+="<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>";

        for (var i = 0; i < 10; i++) {

            content+="<tr><td>" + i + "</td><td>" + response[i].spaceships +
                "</td><td>" + response[i].planets + "</td></tr>";
        }
    content+="</table>";
    $('#ufo').append(content);

Answer 2

這將創建一個表並將其附加到#ufo

 $('#ufo').append("<table id='ufo-table'>")

這將創建一個表行並將其附加到#ufo

 $('#ufo').append("<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>")

如果要將表行放在表中，則必須將其追加到表而不是div。

 $('#ufo').append("</table>")

這什么也沒做。 jQuery不會從end標簽構造元素。

盡管抽象。 您正在使用DOM元素，而不是原始HTML。 您不能將開始標簽附加到一個元素，只能附加另一個元素。

Answer 3

我認為在您的for循環中，您是$("#ufo")而不是應該使用$("#ufo-table")來執行此操作，即在表內附加表行和表數據，然后在$("#ufo") 。

Ajax響應未填充INSIDE HTML <table> 標簽

問題描述

3 個解決方案

解決方案1
1 2019-01-17 07:15:10

解決方案2
1 已采納 2019-01-17 07:15:55

解決方案3
0 2019-01-17 07:17:39

Ajax響應未填充INSIDE HTML <table> 標簽

問題描述

3 個解決方案

解決方案1 1 2019-01-17 07:15:10

解決方案2 1 已采納 2019-01-17 07:15:55

解決方案3 0 2019-01-17 07:17:39

解決方案1
1 2019-01-17 07:15:10

解決方案2
1 已采納 2019-01-17 07:15:55

解決方案3
0 2019-01-17 07:17:39