for loop在append函数内部不起作用

时间:2016-05-24 13:06:49

标签: javascript jquery html json

我想将整个内容包装成单个div,它需要for append function中的循环。在javascript中环绕div后,它没有显示任何内容。

这是我的代码;

$('#postjson').append(
  '<div>' + '<div id="' + data[0].id + '">' + '<p>' + '<div id="namediv">' + data[0].FirstName + '&nbsp;' + data[0].MiddleName + '&nbsp;' + data[0].LastName + '<br/>' + '<span id="locationspan">' + 'xyz' + data[0].Location + '</span>' + '</div>' + '<br/>'
  //+'Email:'+data[0].Email+'<br/>'
  //+'Mobile:'+data[0].Mobile+'<br/>'
  + '</p>' + '</div>'
  // displaying book details
  +
  for (var i = 1; i < data.length; i++) {
    tr = $('<tr/>');
    tr.append("<td>" + data[i].BookNo + "</td>");
    tr.append("<td>" + data[i].BookTitle + "</td>");
    tr.append("<td>" + data[i].BookGenre + "</td>");
    tr.append("<td>" + data[i].BookWriter + "</td>");
    tr.append("<td>" + data[i].BookDescription + "</td>");
    $('#displaytable').append(tr);
  } + '</div>'
);

2 个答案:

答案 0 :(得分:1)

也许你的意思是

var $table = $('<table>', {"id:":"displaytable"});
for (var i = 1; i < data.length; i++) {
    tr = $('<tr/>');
    tr.append("<td/>",{"text":data[i].BookNo});
    tr.append("<td/>",{"text":data[i].BookTitle});
    tr.append("<td/>",{"text":data[i].BookGenre});
    tr.append("<td/>",{"text":data[i].BookWriter});
    tr.append("<td/>",{"text":data[i].BookDescription});
    $table.append(tr);
}

$('#postjson')
  .append($('<div />',{"id":"tableDiv"}))
  .append($('<div />',{"id":data[0].id}).append($('<div />',{"id":"namediv"}).html(data[0].FirstName + '&nbsp;' + data[0].MiddleName + '&nbsp;' + data[0].LastName + 
  .append($table);

答案 1 :(得分:0)

将循环放在append函数之外,最后将表附加到&#39;容器&#39;元素,在html字符串中指定

$('#postjson').append(
  '<div id="container">' + '<div id="' + data[0].id + '">' + '<p>' + '<div id="namediv">' + data[0].FirstName + '&nbsp;' + data[0].MiddleName + '&nbsp;' + data[0].LastName + '<br/>' + '<span id="locationspan">' + 'xyz' + data[0].Location + '</span>' + '</div>' + '<br/>' + '</p>' + '</div>')

for (var i = 1; i < data.length; i++) {
  tr = $('<tr/>');
  tr.append("<td>" + data[i].BookNo + "</td>");
  tr.append("<td>" + data[i].BookTitle + "</td>");
  tr.append("<td>" + data[i].BookGenre + "</td>");
  tr.append("<td>" + data[i].BookWriter + "</td>");
  tr.append("<td>" + data[i].BookDescription + "</td>");
  $('#displaytable').append(tr);
}
$("#container").append($('#displaytable'));