通过javascript对象动态创建一个接一个的文本框
通过javascript对象动态创建一个接一个的文本框
提问于 2015-04-19 06:59:36
我有一个javascript，它通过ajax请求向服务器发送一些信息，并以问题的形式接收一些数据，并将它们的ID作为json数组。
这就是我从服务器接收到的响应json数组的样子：
[
{
"ID":"1",
"question":"Write a function called addNum. "
},
{
"ID":"3",
"question":"Write a function called sumDouble "
}
]这是javascript：
$(document).ready(function(){
$("form#input_qnumber").submit(function() {
var questions = $('#questions').attr('value'); // written question
var quizname = $('#quizname').attr('value');
if (questions) { // values are not empty
$.ajax({
type: "POST",
url: "https://xxxx",
contentType: "application/x-www-form-urlencoded; charset=utf-8",
dataType: "application/json",
data: 'questions='+questions+'&quizname='+quizname,
success: function (data)
{
var JSONObject = JSON.parse(data);
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
console.log(JSONObject[key]["ID"] + ", " + JSONObject[key]["question"]);
}
}
}
});
}
else {
$('div#createquizresp').text("Enter question ID's separated by a comma to be included in the quiz");
$('div#createquizresp').addClass("error");
} // else
$('div#createquizresp').fadeIn();
return false;
});
});正如您所看到的，我可以将响应json解析为javascript对象数组，循环它并将内容转储到控制台中。不过，我想要的是创建textarea元素，从我的数组中给其id属性“ID”键，并将其标记为来自数组的相应问题键。在此之后，我只需将元素附加到html中的div。但我不太清楚该如何做，也不知道是否有可能。请停下来。
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-04-19 07:07:17
如果你也想要一个标签元素；
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
$('<label>')
.attr('for', JSONObject[key]["ID"])
.html(JSONObject[key]["question"])
.appendTo('wherever_you_want');
$('<textarea>')
.attr('id', JSONObject[key]["ID"])
.appendTo('wherever_you_want');
}
}Stack Overflow用户
发布于 2015-04-19 07:17:22
创建动态元素输入和标签，然后将这些元素附加到父div或适合您的需求的主体中。
演示:https://jsfiddle.net/ew4mqhow/3/
<div id ="display"></div>
<script>
var textbox = document.createElement('input');
textbox.setAttribute("id", JSONObject[key]["ID"]);
var labell = document.createElement('label');
labell.setAttribute("for",JSONObject[key]["question"]);
labell.innerHTML = JSONObject[key]["question"];
document.getElementById('display').appendChild(textbox);
document.getElementById('display').appendChild(labell);
</script>Stack Overflow用户
发布于 2015-04-19 08:24:46
基恩的回答是完美的。一项建议是，在外国ID中添加一个前缀，以防万一你会将ID分配给其他类型的元素(即.答案)也是。
for (var key in JSONObject) {
if (JSONObject.hasOwnProperty(key)) {
$('#quizquestions')
.append($('<label>')
.attr('for', 'Q' + JSONObject[key]["ID"])
.html(JSONObject[key]["question"]))
.append($('<textarea>')
.attr('id', 'Q' + JSONObject[key]["ID"]))
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/29726806
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号