javascript - jQuery build table - Stack Overflow

menuOrder is an empty div $("#menuOrder").append('<table>');$(menus).each

menuOrder is an empty div

$("#menuOrder").append('<table>');

$(menus).each(function(i, menu) {
  $("#menuOrder").append('<tr><td>');
  $("#menuOrder").append(menu.text);
  $("#menuOrder").append('</td><td>');

  if (i > 0) {
    $("#menuOrder").append('<img src="/images/_images/up.png" />');
  } else {
    $("#menuOrder").append('<img src="/images/_images/blank.png" />');
  }

  if (i < menus.length - 1) {
    $("#menuOrder").append('<img src="/images/_images/down.png" />');
  }

  $("#menuOrder").append('</td>');
  $("#menuOrder").append('</tr>');
});

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

this code not work properly, how can I change it with minimum iterations?

menuOrder is an empty div

$("#menuOrder").append('<table>');

$(menus).each(function(i, menu) {
  $("#menuOrder").append('<tr><td>');
  $("#menuOrder").append(menu.text);
  $("#menuOrder").append('</td><td>');

  if (i > 0) {
    $("#menuOrder").append('<img src="/images/_images/up.png" />');
  } else {
    $("#menuOrder").append('<img src="/images/_images/blank.png" />');
  }

  if (i < menus.length - 1) {
    $("#menuOrder").append('<img src="/images/_images/down.png" />');
  }

  $("#menuOrder").append('</td>');
  $("#menuOrder").append('</tr>');
});

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

this code not work properly, how can I change it with minimum iterations?

Share Improve this question edited May 28, 2017 at 15:15 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Apr 26, 2010 at 21:10 kusanagikusanagi 14.6k22 gold badges89 silver badges112 bronze badges 1
  • 2 It is remend to avoid lots of .append like this, instead when possible, build the string with HTML and then append – Fabiano Soriani Commented Apr 26, 2010 at 21:12
Add a ment  | 

2 Answers 2

Reset to default 4

Try doing something like this:

var rows = [];
$(menus).each(function(i, menu) {
 var row = '<tr><td>'.menu.text.'</td><td>';

    if (i > 0) {
        row +='<img src="/images/_images/up.png" />';
    }
    else {
        row +='<img src="/images/_images/blank.png" />';
    }

    if (i < menus.length - 1) {
       row +='<img src="/images/_images/down.png" />';
    }

    row += '</td></tr>';
    rows.push(row);
});
$('<table></table>').append(rows.join('')).appendTo('#menuOrder');

This fills the rows array with a string that contains the HTML for each row. When its done creating all the rows then it creates a jQuery Object of a table element and appends all the rows to it. It then appends the table to #menuOrder.

Note that with append() you can't do this:

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

Instead of glueing together pieces of HTML strings, you must think in terms of plete DOM nodes. Examples of valid arguments for append():

.append($('.something'))
.append(document.createElement('div'))
.append('<div />') // automatically creates empty div element
.append('<tr><td></td></tr>') // automatically creates tr with td inside

发布者:admin,转转请注明出处:http://www.yc00.com/questions/1745560177a4633061.html

相关推荐

  • javascript - jQuery build table - Stack Overflow

    menuOrder is an empty div $("#menuOrder").append('<table>');$(menus).each

    19小时前
    40

发表回复

评论列表(0条)

  • 暂无评论

联系我们

400-800-8888

在线咨询: QQ交谈

邮件:admin@example.com

工作时间:周一至周五,9:30-18:30,节假日休息

关注微信