Ajax响应未填充INSIDE HTML <table> 标签
[英]ajax response not populating INSIDE html <table> tag
问题描述
Not exactly sure where I went wrong here but I want the content of the response to populate inside the html tags. 
不能完全确定我在哪里出错，但是我希望响应的内容填充在html标签中。 I'm thinking first I append the table tag, header. 我想首先添加表标签，标题。 Then let the function populate the inside of the table tag. 然后让函数填充表格标记的内部。 Finally close the table. 最后关闭桌子。 Something is not right here though. 但是这里有些不对劲。
No errors are being generated. 没有错误正在生成。 All data is presented to page but just not inside the table tags so that CSS classes can be applied. 所有数据都显示在页面上，但不会显示在表格标签内，因此可以应用CSS类。
HTML BODY 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 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()
Table tabs with none of the response data inside. 表格标签中没有任何响应数据。 Instead it seems to appear OUTSIDE of the table tags. 相反，它似乎出现在表标签的外面。
3 个解决方案
解决方案1
1 2019-01-17 07:15:10
Instead of appending multiple times, you should declare a variable and appending html to it. 而不是多次附加，您应该声明一个变量并向其附加html。 upon finishing appending html, you finally should apend the string to div tag. 完成附加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);
解决方案2
1 已采纳 2019-01-17 07:15:55
This creates a table and appends it to #ufo 这将创建一个表并将其附加到#ufo
$('#ufo').append("<table id='ufo-table'>")
This creates a table row and appends it to #ufo 这将创建一个表行并将其附加到#ufo
$('#ufo').append("<tr><th>Data 1</th><th>Data 2</th><th>Data 3</th></tr>")
If you want your table row inside your table, you have to append it to the table and not the div. 如果要将表行放在表中，则必须将其追加到表而不是div。
$('#ufo').append("</table>")
This does nothing. 这什么也没做。 jQuery won't construct an element out of an end tag. jQuery不会从end标签构造元素。
Despite the abstraction. 尽管抽象。 You are working with DOM elements, not raw HTML. 您正在使用DOM元素，而不是原始HTML。 You can't append a start tag to an element, only another element. 您不能将开始标签附加到一个元素，只能附加另一个元素。
解决方案3
0 2019-01-17 07:17:39
我认为在您的for循环中，您是$("#ufo")而不是应该使用$("#ufo-table")来执行此操作，即在表内附加表行和表数据，然后在$("#ufo") 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.