用jQuery创建表格 - 追加 [英] Create table with jQuery - append

问题描述

我在页面div上：

 < div id =here_table>< / div> 
  

和jquery：

  for（i = 0; i <3; i ++）{
 $（'＃here_table'）。append（'result'+ i）; 
} 
  

这为我生成：

 < div id =here_table> 
 result1 result2 result3 etc 
< / div> 
  

我希望在表格中收到：

 < div id =here_table> 
< table> 
< tr>< td> result1< / td>< / tr> 
< tr>< td> result2< / td>< / tr> 
< tr>< td> result3< / td>< / tr> 
< / table> 
< / div> 
  

我在做：

  $（'＃here_table'）。append（'< table>）; 
 
为（I = 0; I< 3;我++）{
 $（ '＃here_table'）附加（ '< TR>< TD>' + '结果' + i +'< / td>< / tr>'）; 
} 
 
 $（'＃here_table'）。append（'< / table>）; 
  

但是这对我产生了影响：

 < div id =here_table> 
< table> < /表> !!!!!!!!!! 
< tr>< td> result1< / td>< / tr> 
< tr>< td> result2< / td>< / tr> 
< tr>< td> result3< / td>< / tr> 
< / div> 
  

为什么？我怎样才能做到这一点？

LIVE： http：// jsfiddle.net/n7cyE/

解决方案

  $（ '＃here_table'）附加（ '< TR>< TD>' + '结果' + I +< / TD>< / TR> '）; 
  

附加到 div＃here_table 不是新表。

有几种方法：

  / *请注意，整个内容变量只是一个字符串* / 
 var content =< table> 
为（I = 0; I< 3;我++）{
的含量+ = '< TR>< TD>' + '结果' + I +< / TD>< / TR>'; 
} 
 content + =< / table> 
 
 $（'＃here_table'）。append（content）; 
  

但是，通过上述方法，添加样式和动态地执行<

但是这个怎么样呢，它可以达到你期望的水平：

  var table = $（'< table>）。addClass（'foo'）; 
 for（i = 0; i <3; i ++）{
 var row = $（'< tr>'）.addClass（'bar'）.text（'result'+ i）; 
 table.append（row）; 
} 
 
 $（'＃here_table'）。append（table）; 
  

希望这会有所帮助。

I have on page div:

<div id="here_table"></div>

and in jquery:

for(i=0;i<3;i++){
    $('#here_table').append( 'result' +  i );
}

this generating for me:

<div id="here_table">
    result1 result2 result3 etc
</div>

I would like receive this in table:

<div id="here_table">
    <table>
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
    </table>
</div>

I doing:

$('#here_table').append(  '<table>' );

 for(i=0;i<3;i++){
    $('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );
}

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

but this generate for me:

<div id="here_table">
    <table> </table> !!!!!!!!!!
          <tr><td>result1</td></tr>
          <tr><td>result2</td></tr>
          <tr><td>result3</td></tr>
</div>

Why? how can i make this correctly?

LIVE: http://jsfiddle.net/n7cyE/

解决方案

This line:

$('#here_table').append( '<tr><td>' + 'result' +  i + '</td></tr>' );

Appends to the div#here_table not the new table.

There are several approaches:

/* Note that the whole content variable is just a string */
var content = "<table>"
for(i=0; i<3; i++){
    content += '<tr><td>' + 'result ' +  i + '</td></tr>';
}
content += "</table>"

$('#here_table').append(content);

But, with the above approach it is less manageable to add styles and do stuff dynamically with <table>.

But how about this one, it does what you expect nearly great:

var table = $('<table>').addClass('foo');
for(i=0; i<3; i++){
    var row = $('<tr>').addClass('bar').text('result ' + i);
    table.append(row);
}

$('#here_table').append(table);

Hope this would help.

这篇关于用jQuery创建表格 - 追加的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！