blocks|key|688548|text|当您使用append时，jQuery希望它是格式良好的超文本标记语言(纯文本计数)。append不像做%2B=。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|688549|您需要先制作表，然后再追加它。|688550|var+$table+=+$('<table/>');
for(var+i=0;+i<3;+i%2B%2B){
++++$table.append(+'<tr><td>'+%2B+'result'+%2B++i+%2B+'</td></tr>'+);
}
$('#here_table').append($table);|code-block|syntax|javascript|688551|entityMap^0|4|6|16|6|1F|2|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|V|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|W|8|@]|D|@]|E|$K|L]]|$1|M|3|-4|5|6|7|X|8|@]|D|@]|E|$]]]|N|$]]

<p>When you use <code>append</code>, jQuery expects it to be well-formed HTML (plain text counts).  <code>append</code> is not like doing <code>+=</code>.</p>

<p>You need to make the table first, then append it.</p>

<pre><code>var $table = $('&lt;table/&gt;');
for(var i=0; i&lt;3; i++){
    $table.append( '&lt;tr&gt;&lt;td&gt;' + 'result' +  i + '&lt;/td&gt;&lt;/tr&gt;' );
}
$('#here_table').append($table);
</code></pre>


blocks|key|688614|text|这一行：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|688615|$('#here_table').append(+'<tr><td>'+%2B+'result'+%2B++i+%2B+'</td></tr>'+);|code-block|syntax|javascript|688616|追加到div#here_table，而不是新的table。|offset|length|style|CODE|688617|有几种方法：|688618|/*+Note+that+the+whole+content+variable+is+just+a+string+*/
var+content+=+"<table>"
for(i=0;+i<3;+i%2B%2B){
++++content+%2B=+'<tr><td>'+%2B+'result+'+%2B++i+%2B+'</td></tr>';
}
content+%2B=+"</table>"

$('#here_table').append(content);|688619|但是，使用上面的方法，添加样式和使用<table>动态执行操作的可管理性较差。|688620|但是这个怎么样，它做了你所期望的几乎很棒的事情：|688621|var+table+=+$('<table>').addClass('foo');
for(i=0;+i<3;+i%2B%2B){
++++var+row+=+$('<tr>').addClass('bar').text('result+'+%2B+i);
++++table.append(row);
}

$('#here_table').append(table);|688622|希望这能有所帮助。|688623|entityMap^0|0|0|3|E|N|5|0|0|0|I|7|0|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|11|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|12|8|@$I|13|J|14|K|L]|$I|15|J|16|K|L]]|9|@]|A|$]]|$1|M|3|N|5|6|7|17|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|18|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|19|8|@$I|1A|J|1B|K|L]]|9|@]|A|$]]|$1|S|3|T|5|6|7|1C|8|@]|9|@]|A|$]]|$1|U|3|V|5|D|7|1D|8|@]|9|@]|A|$E|F]]|$1|W|3|X|5|6|7|1E|8|@]|9|@]|A|$]]|$1|Y|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|Z|$]]

<p>This line:</p>

<pre><code>$('#here_table').append( '&lt;tr&gt;&lt;td&gt;' + 'result' +  i + '&lt;/td&gt;&lt;/tr&gt;' );
</code></pre>

<p>Appends to the <code>div#here_table</code> not the new <code>table</code>. </p>

<p>There are several approaches:</p>

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

$('#here_table').append(content);
</code></pre>

<p>But, with the above approach it is less manageable to add styles and do stuff dynamically with <code>&lt;table&gt;</code>.</p>

<p>But how about this one, it does what you expect nearly great:</p>

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

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

<p>Hope this would help.</p>


blocks|key|472464|text|下面是您可以做的事情：http://jsfiddle.net/n7cyE/4/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|472465|$('#here_table').append('<table></table>');
var+table+=+$('#here_table').children();
+for(i=0;i<3;i%2B%2B){
++++table.append(+'<tr><td>'+%2B+'result'+%2B++i+%2B+'</td></tr>'+);
}|code-block|syntax|javascript|472466|诚挚的问候!|472467|entityMap|0|LINK|mutability|MUTABLE|url|http://jsfiddle.net/n7cyE/4/^0|B|S|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@]|C|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|C|$]]]|L|$M|$5|N|O|P|C|$Q|R]]]]

<p>Here is what you can do: <a href="http://jsfiddle.net/n7cyE/4/" rel="nofollow">http://jsfiddle.net/n7cyE/4/</a></p>

<pre><code>$('#here_table').append('&lt;table&gt;&lt;/table&gt;');
var table = $('#here_table').children();
 for(i=0;i&lt;3;i++){
    table.append( '&lt;tr&gt;&lt;td&gt;' + 'result' +  i + '&lt;/td&gt;&lt;/tr&gt;' );
}
</code></pre>

<p>Best regards!</p>


blocks|key|688654|text|或者以这种方式使用所有jQuery。each可以遍历任何数据，可以是DOM元素，也可以是数组/对象。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|688655|var+data+=+['one',+'two',+'three',+'four',+'five',+'six',+'seven',+'eight'];
var+numCols+=+1;+++++++++++


$.each(data,+function(i)+{
++if(!(i%25numCols))+tRow+=+$('<tr>');

++tCell+=+$('<td>').html(data[i]);

++$('table').append(tRow.append(tCell));
});
​|code-block|syntax|javascript|688656|http://jsfiddle.net/n7cyE/93/|offset|length|688657|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|0|T|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|S|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|T|8|@]|9|@$I|U|J|V|1|W]]|A|$]]|$1|K|3|-4|5|6|7|X|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|H]]]]

<p>Or do it this way to use ALL jQuery. The each can loop through any data be it DOM elements or an array/object.</p>

<pre><code>var data = ['one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight'];
var numCols = 1;           


$.each(data, function(i) {
  if(!(i%numCols)) tRow = $('&lt;tr&gt;');

  tCell = $('&lt;td&gt;').html(data[i]);

  $('table').append(tRow.append(tCell));
});
​
</code></pre>

<p><a href="http://jsfiddle.net/n7cyE/93/">http://jsfiddle.net/n7cyE/93/</a></p>


blocks|key|688733|text|要添加多列和多行，我们还可以进行字符串连接。这不是最好的方法，但它确实有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|688734|+++++++++++++var+resultstring='<table>';
++++++for(var+j=0;j<arr.length;j%2B%2B){
++++++++++++++//array+arr+contains+the+field+names+in+this+case
++++++++++resultstring%2B=+'<th>'%2B+arr[j]+%2B+'</th>';
++++++}
++++++$(resultset).each(function(i,+result)+{
++++++++++//+resultset+is+in+json+format
++++++++++resultstring%2B='<tr>';
++++++++++for(var+j=0;j<arr.length;j%2B%2B){
++++++++++++++resultstring%2B='<td>'%2B+result[arr[j]]%2B+'</td>';
++++++++++}
++++++++++resultstring%2B='</tr>';
++++++});
++++++resultstring%2B='</table>';
++++++++++$('#resultdisplay').html(resultstring);|code-block|syntax|javascript|688735|这还允许您向表中动态添加行和列，而无需对字段名进行硬编码。|688736|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>To add multiple columns and rows, we can also do a string concatenation. Not the best way, but it sure works. </p>

<pre><code>             var resultstring='&lt;table&gt;';
      for(var j=0;j&lt;arr.length;j++){
              //array arr contains the field names in this case
          resultstring+= '&lt;th&gt;'+ arr[j] + '&lt;/th&gt;';
      }
      $(resultset).each(function(i, result) {
          // resultset is in json format
          resultstring+='&lt;tr&gt;';
          for(var j=0;j&lt;arr.length;j++){
              resultstring+='&lt;td&gt;'+ result[arr[j]]+ '&lt;/td&gt;';
          }
          resultstring+='&lt;/tr&gt;';
      });
      resultstring+='&lt;/table&gt;';
          $('#resultdisplay').html(resultstring);
</code></pre>

<p>This also allows you to add rows and columns to the table dynamically, without hardcoding the fieldnames.</p>


blocks|key|472665|text|或者没有用于创建某些链接(或其他)的循环的静态HTML。将<div+id="menu">放在任何页面上都可以重现该HTML。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|472666|++++<!DOCTYPE+html>
++++<html+xmlns="http://www.w3.org/1999/xhtml">
++++<head>
++++++++<title>HTML+Masterpage</title>
++++++++<script+src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

++++++++<script+type="text/javascript">
++++++++++++function+nav()+{
++++++++++++++++var+menuHTML=+'<ul><li><a+href="#">link+1</a></li></ul><ul><li><a+href="#">link+2</a></li></ul>';
++++++++++++++++$('#menu').append(menuHTML);
++++++++++++}
++++++++</script>

++++++++<style+type="text/css">
++++++++</style>
++++</head>
++++<body+onload="nav()">
++++++++<div+id="menu"></div>
++++</body>
++++</html>|code-block|syntax|javascript|472667|entityMap^0|T|F|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@$9|N|A|O|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|P|8|@]|D|@]|E|$I|J]]|$1|K|3|-4|5|6|7|Q|8|@]|D|@]|E|$]]]|L|$]]

<p>Or static HTML without the loop for creating some links (or whatever). Place the <code>&lt;div id="menu"&gt;</code> on any page to reproduce the HTML. </p>

<pre><code>    &lt;!DOCTYPE html&gt;
    &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
    &lt;head&gt;
        &lt;title&gt;HTML Masterpage&lt;/title&gt;
        &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"&gt;&lt;/script&gt;

        &lt;script type="text/javascript"&gt;
            function nav() {
                var menuHTML= '&lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;link 1&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;&lt;ul&gt;&lt;li&gt;&lt;a href="#"&gt;link 2&lt;/a&gt;&lt;/li&gt;&lt;/ul&gt;';
                $('#menu').append(menuHTML);
            }
        &lt;/script&gt;

        &lt;style type="text/css"&gt;
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body onload="nav()"&gt;
        &lt;div id="menu"&gt;&lt;/div&gt;
    &lt;/body&gt;
    &lt;/html&gt;
</code></pre>


blocks|key|472721|text|一个使用上述方法并使用JSON表示数据的工作示例。这在我的项目中用于处理从服务器获取数据的ajax调用。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|472722|http://jsfiddle.net/vinocui/22mX6/1/|offset|length|472723|在html中：<+table+id='here_table‘><+/table+>|472724|JS代码：|472725|function+feed_table(tableobj){
++++//+data+is+a+JSON+object+with
++++//{'id':+'table+id',
++++//+'header':[{'a':+'Asset+Tpe',+'b'+:+'Description',+'c'+:+'Assets+Value',+'d':'Action'}],+
++++//+'data':+[{'a':+'Non+Real+Estate',++'b'+:'Credit+card',++'c'+:'$5000'+,+'d':+'Edit/Delete'+},...+++]}

++++$('#'+%2B+tableobj.id).html(+''+);

++++$.each([tableobj.header,+tableobj.data],+function(_index,+_obj){
++++$.each(_obj,+function(index,+row){
++++++++var+line+=+"";
++++++++$.each(row,+function(key,+value){
++++++++++++if(0+===+_index){
++++++++++++++++line+%2B=+'<th>'+%2B+value+%2B+'</th>';++++
++++++++++++}else{
++++++++++++++++line+%2B=+'<td>'+%2B+value+%2B+'</td>';
++++++++++++}
++++++++});
++++++++line+=+'<tr>'+%2B+line+%2B+'</tr>';
++++++++$('#'+%2B+tableobj.id).append(line);
++++});


++++});++++
}

//+testing
$(function(){
++++var+t+=+{
++++'id':+'here_table',
++++'header':[{'a':+'Asset+Tpe',+'b'+:+'Description',+'c'+:+'Assets+Value',+'d':'Action'}],+
++++'data':+[{'a':+'Non+Real+Estate',++'b'+:'Credit+card',++'c'+:'$5000'+,+'d':+'Edit/Delete'+},
+++++++++{'a':+'Real+Estate',++'b'+:'Property',++'c'+:'$500000'+,+'d':+'Edit/Delete'+}
++++++++]};

++++feed_table(t);
});|code-block|syntax|javascript|472726|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|10|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|V|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|F|3|G|5|6|7|10|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|11|8|@]|9|@]|A|$]]|$1|J|3|K|5|L|7|12|8|@]|9|@]|A|$M|N]]|$1|O|3|-4|5|6|7|13|8|@]|9|@]|A|$]]]|P|$Q|$5|R|S|T|A|$U|C]]]]

<p>A working example using the method mentioned above and using JSON to represent the data. This is used in my project of dealing with ajax calls fetching data from server.</p>

<p><a href="http://jsfiddle.net/vinocui/22mX6/1/" rel="nofollow">http://jsfiddle.net/vinocui/22mX6/1/</a></p>

<p>In your html:
        &lt; table id='here_table' >&lt; /table >    </p>

<p>JS code:</p>

<pre><code>function feed_table(tableobj){
    // data is a JSON object with
    //{'id': 'table id',
    // 'header':[{'a': 'Asset Tpe', 'b' : 'Description', 'c' : 'Assets Value', 'd':'Action'}], 
    // 'data': [{'a': 'Non Real Estate',  'b' :'Credit card',  'c' :'$5000' , 'd': 'Edit/Delete' },...   ]}

    $('#' + tableobj.id).html( '' );

    $.each([tableobj.header, tableobj.data], function(_index, _obj){
    $.each(_obj, function(index, row){
        var line = "";
        $.each(row, function(key, value){
            if(0 === _index){
                line += '&lt;th&gt;' + value + '&lt;/th&gt;';    
            }else{
                line += '&lt;td&gt;' + value + '&lt;/td&gt;';
            }
        });
        line = '&lt;tr&gt;' + line + '&lt;/tr&gt;';
        $('#' + tableobj.id).append(line);
    });


    });    
}

// testing
$(function(){
    var t = {
    'id': 'here_table',
    'header':[{'a': 'Asset Tpe', 'b' : 'Description', 'c' : 'Assets Value', 'd':'Action'}], 
    'data': [{'a': 'Non Real Estate',  'b' :'Credit card',  'c' :'$5000' , 'd': 'Edit/Delete' },
         {'a': 'Real Estate',  'b' :'Property',  'c' :'$500000' , 'd': 'Edit/Delete' }
        ]};

    feed_table(t);
});
</code></pre>


blocks|key|472779|text|对我来说，这种方法更漂亮：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|472780|String.prototype.embraceWith+=+function(tag)+{
++++return+"<"+%2B+tag+%2B+">"+%2B+this+%2B+"</"+%2B+tag+%2B+">";
};

var+results+=+[
++{type:"Fiat",+model:500,+color:"white"},+
++{type:"Mercedes",+model:+"Benz",+color:"black"},
++{type:"BMV",+model:+"X6",+color:"black"}
];

var+tableHeader+=+("Type".embraceWith("th")+%2B+"Model".embraceWith("th")+%2B+"Color".embraceWith("th")).embraceWith("tr");
var+tableBody+=+results.map(function(item)+{
++++return+(item.type.embraceWith("td")+%2B+item.model.toString().embraceWith("td")+%2B+item.color.embraceWith("td")).embraceWith("tr")
}).join("");

var+table+=+(tableHeader+%2B+tableBody).embraceWith("table");

$("#result-holder").append(table);|code-block|syntax|javascript|472781|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

<p>As for me, this approach is prettier: </p>

<pre><code>String.prototype.embraceWith = function(tag) {
    return "&lt;" + tag + "&gt;" + this + "&lt;/" + tag + "&gt;";
};

var results = [
  {type:"Fiat", model:500, color:"white"}, 
  {type:"Mercedes", model: "Benz", color:"black"},
  {type:"BMV", model: "X6", color:"black"}
];

var tableHeader = ("Type".embraceWith("th") + "Model".embraceWith("th") + "Color".embraceWith("th")).embraceWith("tr");
var tableBody = results.map(function(item) {
    return (item.type.embraceWith("td") + item.model.toString().embraceWith("td") + item.color.embraceWith("td")).embraceWith("tr")
}).join("");

var table = (tableHeader + tableBody).embraceWith("table");

$("#result-holder").append(table);
</code></pre>


blocks|key|689031|text|我更喜欢使用jquery的最具可读性和可扩展性的方式。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|689032|此外，您还可以动态构建完全动态的内容。|689033|从jquery版本1.4开始，您可以将属性传递给元素，|689034|imho，一个杀手级的功能。同时，代码也可以保持整洁。|689035|$(function(){

++++++++var+tablerows+=+new+Array();

++++++++$.each(['result1',+'result2',+'result3'],+function(+index,+value+)+{
++++++++++++tablerows.push('<tr><td>'+%2B+value+%2B+'</td></tr>');
++++++++});

++++++++var+table+=++$('<table/>',+{
+++++++++++html:++tablerows
+++++++});

++++++++var+div+=+$('<div/>',+{
++++++++++++id:+'here_table',
++++++++++++html:+table
++++++++});

++++++++$('body').append(div);

++++});|code-block|syntax|javascript|689036|Addon:传递多个"html“标记，您必须使用数组表示法，例如：|689037|var+div+=+$('<div/>',+{
++++++++++++id:+'here_table',
++++++++++++html:+[+div1,+div2,+table+]
++++++++});|689038|最佳Rgds。|689039|弗朗茨|689040|entityMap^0|0|0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|X|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|Y|8|@]|9|@]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|11|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|12|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|13|8|@]|9|@]|A|$]]|$1|S|3|T|5|6|7|14|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|15|8|@]|9|@]|A|$]]]|V|$]]

<p><br>
i prefer the most readable and extensible way using jquery.<br>
Also, you can build fully dynamic content on the fly.<br>
Since jquery version 1.4 you can pass attributes to elements which is, <br>imho, a killer feature.
Also the code can be kept cleaner.<br></p>

<pre><code>$(function(){

        var tablerows = new Array();

        $.each(['result1', 'result2', 'result3'], function( index, value ) {
            tablerows.push('&lt;tr&gt;&lt;td&gt;' + value + '&lt;/td&gt;&lt;/tr&gt;');
        });

        var table =  $('&lt;table/&gt;', {
           html:  tablerows
       });

        var div = $('&lt;div/&gt;', {
            id: 'here_table',
            html: table
        });

        $('body').append(div);

    });
</code></pre>

<p>Addon: passing more than one "html" tag you've to use array notation like:
e.g.</p>

<pre><code>var div = $('&lt;div/&gt;', {
            id: 'here_table',
            html: [ div1, div2, table ]
        });
</code></pre>

<p>best Rgds.<br>
Franz</p>


blocks|key|473028|text|我写了一个很好的函数，可以生成垂直和水平的表格：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|473029|function+generateTable(rowsData,+titles,+type,+_class)+{
++++var+$table+=+$("<table>").addClass(_class);
++++var+$tbody+=+$("<tbody>").appendTo($table);


++++if+(type+==+2)+{//vertical+table
++++++++if+(rowsData.length+!==+titles.length)+{
++++++++++++console.error('rows+and+data+rows+count+doesent+match');
++++++++++++return+false;
++++++++}
++++++++titles.forEach(function+(title,+index)+{
++++++++++++var+$tr+=+$("<tr>");
++++++++++++$("<th>").html(title).appendTo($tr);
++++++++++++var+rows+=+rowsData[index];
++++++++++++rows.forEach(function+(html)+{
++++++++++++++++$("<td>").html(html).appendTo($tr);
++++++++++++});
++++++++++++$tr.appendTo($tbody);
++++++++});

++++}+else+if+(type+==+1)+{//horsantal+table+
++++++++var+valid+=+true;
++++++++rowsData.forEach(function+(row)+{
++++++++++++if+(!row)+{
++++++++++++++++valid+=+false;
++++++++++++++++return;
++++++++++++}

++++++++++++if+(row.length+!==+titles.length)+{
++++++++++++++++valid+=+false;
++++++++++++++++return;
++++++++++++}
++++++++});

++++++++if+(!valid)+{
++++++++++++console.error('rows+and+data+rows+count+doesent+match');
++++++++++++return+false;
++++++++}

++++++++var+$tr+=+$("<tr>");
++++++++titles.forEach(function+(title,+index)+{
++++++++++++$("<th>").html(title).appendTo($tr);
++++++++});
++++++++$tr.appendTo($tbody);

++++++++rowsData.forEach(function+(row,+index)+{
++++++++++++var+$tr+=+$("<tr>");
++++++++++++row.forEach(function+(html)+{
++++++++++++++++$("<td>").html(html).appendTo($tr);
++++++++++++});
++++++++++++$tr.appendTo($tbody);
++++++++});
++++}

++++return+$table;
}|code-block|syntax|javascript|473030|使用示例：|473031|var+title+=+[
++++'مساحت+موجود',
++++'مساحت+باقیمانده',
++++'مساحت+در+طرح'
];

var+rows+=+[
++++[number_format(data.source.area,2)],
++++[number_format(data.intersection.area,2)],
++++[number_format(data.deference.area,2)]
];

var+$ft+=+generateTable(rows,+title,+2,"table+table-striped+table-hover+table-bordered");

$ft.appendTo(+GroupAnalyse.$results+);

var+title+=+[
++++'جهت',
++++'اندازه+قبلی',
++++'اندازه+فعلی',
++++'وضعیت',
++++'میزان+عقب+نشینی',
];

var+rows+=+data.edgesData.map(function+(r)+{
++++return+[
++++++++r.directionText,
++++++++r.lineLength,
++++++++r.newLineLength,
++++++++r.stateText,
++++++++r.lineLengthDifference
++++];
});


var+$et+=+generateTable(rows,+title,+1,"table+table-striped+table-hover+table-bordered");

$et.appendTo(+GroupAnalyse.$results+);

$('<hr/>').appendTo(+GroupAnalyse.$results+);|473032|示例结果：|473033|​|473034|📷|atomic|offset|length|473035|473036|entityMap|0|IMAGE|mutability|IMMUTABLE|imageUrl|https://ask.qcloudimg.com/http-save/yehe-900000/e33dd64eefde40085002df8c9f08d506.png|imageAlt^0|0|0|0|0|0|0|0|1|0|0|0^^$0|@$1|2|3|4|5|6|7|13|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|14|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|15|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|16|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|17|8|@]|9|@]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|Q|7|19|8|@]|9|@$R|1A|S|1B|1|1C]]|A|$]]|$1|T|3|N|5|6|7|1D|8|@]|9|@]|A|$]]|$1|U|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|V|$W|$5|X|Y|Z|A|$10|11|12|-4]]]]

<p>I wrote rather good function that can generate vertical and horizontal tables:</p>

<pre><code>function generateTable(rowsData, titles, type, _class) {
    var $table = $("&lt;table&gt;").addClass(_class);
    var $tbody = $("&lt;tbody&gt;").appendTo($table);


    if (type == 2) {//vertical table
        if (rowsData.length !== titles.length) {
            console.error('rows and data rows count doesent match');
            return false;
        }
        titles.forEach(function (title, index) {
            var $tr = $("&lt;tr&gt;");
            $("&lt;th&gt;").html(title).appendTo($tr);
            var rows = rowsData[index];
            rows.forEach(function (html) {
                $("&lt;td&gt;").html(html).appendTo($tr);
            });
            $tr.appendTo($tbody);
        });

    } else if (type == 1) {//horsantal table 
        var valid = true;
        rowsData.forEach(function (row) {
            if (!row) {
                valid = false;
                return;
            }

            if (row.length !== titles.length) {
                valid = false;
                return;
            }
        });

        if (!valid) {
            console.error('rows and data rows count doesent match');
            return false;
        }

        var $tr = $("&lt;tr&gt;");
        titles.forEach(function (title, index) {
            $("&lt;th&gt;").html(title).appendTo($tr);
        });
        $tr.appendTo($tbody);

        rowsData.forEach(function (row, index) {
            var $tr = $("&lt;tr&gt;");
            row.forEach(function (html) {
                $("&lt;td&gt;").html(html).appendTo($tr);
            });
            $tr.appendTo($tbody);
        });
    }

    return $table;
}
</code></pre>

<p>usage example:</p>

<pre><code>var title = [
    'مساحت موجود',
    'مساحت باقیمانده',
    'مساحت در طرح'
];

var rows = [
    [number_format(data.source.area,2)],
    [number_format(data.intersection.area,2)],
    [number_format(data.deference.area,2)]
];

var $ft = generateTable(rows, title, 2,"table table-striped table-hover table-bordered");

$ft.appendTo( GroupAnalyse.$results );

var title = [
    'جهت',
    'اندازه قبلی',
    'اندازه فعلی',
    'وضعیت',
    'میزان عقب نشینی',
];

var rows = data.edgesData.map(function (r) {
    return [
        r.directionText,
        r.lineLength,
        r.newLineLength,
        r.stateText,
        r.lineLengthDifference
    ];
});


var $et = generateTable(rows, title, 1,"table table-striped table-hover table-bordered");

$et.appendTo( GroupAnalyse.$results );

$('&lt;hr/&gt;').appendTo( GroupAnalyse.$results );
</code></pre>

<p>example result:</p>

<p><a href="https://i.stack.imgur.com/5rMPE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5rMPE.png" alt="example result"></a></p>


blocks|key|473049|text|<table+id="game_table"+border="1">|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|473050|和Jquery|unstyled|473051|var+i;
for+(i+=+0;+ii+<+10;+i%2B%2B)+
{

++++++++var+tr+=+$("<tr></tr>")
++++++++var+ii;
++++++++for+(ii+=+0;+ii+<+10;+ii%2B%2B)+
++++++++{
++++++++tr.append(`<th>Firstname</th>`)
++++++++}

$('#game_table').append(tr)
}|473052|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|L|8|@]|9|@]|A|$]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$B|C]]|$1|I|3|-4|5|F|7|N|8|@]|9|@]|A|$]]]|J|$]]

<pre><code>&lt;table id="game_table" border="1"&gt;
</code></pre>

<p>and Jquery</p>

<pre><code>var i;
for (i = 0; ii &lt; 10; i++) 
{

        var tr = $("&lt;tr&gt;&lt;/tr&gt;")
        var ii;
        for (ii = 0; ii &lt; 10; ii++) 
        {
        tr.append(`&lt;th&gt;Firstname&lt;/th&gt;`)
        }

$('#game_table').append(tr)
}
</code></pre>


blocks|key|689283|text|这是最好的|type|unstyled|depth|inlineStyleRanges|entityRanges|data|689284|html|689285|<div+id="here_table">+</div>|code-block|syntax|javascript|689286|jQuery|689287|$('#here_table').append(+'<table>'+);

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

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

$('#here_table').append(++'</table>'+);|689288|entityMap^0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|P|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|Q|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|R|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|M|3|-4|5|6|7|T|8|@]|9|@]|A|$]]]|N|$]]

<p>this is most better</p>

<p>html</p>

<pre><code>&lt;div id="here_table"&gt; &lt;/div&gt;
</code></pre>

<p>jQuery</p>

<pre><code>$('#here_table').append( '&lt;table&gt;' );

for(i=0;i&lt;3;i++)
{
$('#here_table').append( '&lt;tr&gt;' + 'result' +  i + '&lt;/tr&gt;' );

    for(ii=0;ii&lt;3;ii++)
    {
    $('#here_table').append( '&lt;td&gt;' + 'result' +  i + '&lt;/tr&gt;' );
    }
}

$('#here_table').append(  '&lt;/table&gt;' );
</code></pre>


blocks|key|473113|text|重要的是要注意，您可以使用Emmet来实现相同的结果。首先，看看Emmet在https://emmet.io/能为你做些什么|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|473114|简而言之，使用Emmet，您可以将字符串扩展为复杂的HTML标记，如以下示例所示：|473115|示例#1|473116|ul>li*5|code-block|syntax|javascript|473117|..。将产生|473118|<ul>
++++<li></li>
++++<li></li>
++++<li></li>
++++<li></li>
++++<li></li>
</ul>|473119|示例#2|473120|div#header%2Bdiv.page%2Bdiv#footer.class1.class2.class3|473121|473122|<div+id="header"></div>
<div+class="page"></div>
<div+id="footer"+class="class1+class2+class3"></div>|473123|清单不胜枚举。在https://docs.emmet.io/abbreviations/syntax/上有更多的例子|473124|有一个库可以使用jQuery来实现这一点。它的名字叫Emmet.js，可以在https://github.com/christiansandor/Emmet.js上找到|473125|entityMap|0|LINK|mutability|MUTABLE|url|https://emmet.io/|1|https://docs.emmet.io/abbreviations/syntax/|2|https://github.com/christiansandor/Emmet.js^0|12|H|0|0|0|0|0|0|0|0|0|0|0|8|17|1|0|12|17|2|0^^$0|@$1|2|3|4|5|6|7|1D|8|@]|9|@$A|1E|B|1F|1|1G]]|C|$]]|$1|D|3|E|5|6|7|1H|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1I|8|@]|9|@]|C|$]]|$1|H|3|I|5|J|7|1J|8|@]|9|@]|C|$K|L]]|$1|M|3|N|5|6|7|1K|8|@]|9|@]|C|$]]|$1|O|3|P|5|J|7|1L|8|@]|9|@]|C|$K|L]]|$1|Q|3|R|5|6|7|1M|8|@]|9|@]|C|$]]|$1|S|3|T|5|J|7|1N|8|@]|9|@]|C|$K|L]]|$1|U|3|N|5|6|7|1O|8|@]|9|@]|C|$]]|$1|V|3|W|5|J|7|1P|8|@]|9|@]|C|$K|L]]|$1|X|3|Y|5|6|7|1Q|8|@]|9|@$A|1R|B|1S|1|1T]]|C|$]]|$1|Z|3|10|5|6|7|1U|8|@]|9|@$A|1V|B|1W|1|1X]]|C|$]]|$1|11|3|-4|5|6|7|1Y|8|@]|9|@]|C|$]]]|12|$13|$5|14|15|16|C|$17|18]]|19|$5|14|15|16|C|$17|1A]]|1B|$5|14|15|16|C|$17|1C]]]]

<p>It is important to note that you could use Emmet to achieve the same result. First, check what Emmet can do for you at <a href="https://emmet.io/" rel="nofollow noreferrer">https://emmet.io/</a></p>

<p>In a nutshell, with Emmet, you can expand a string into a complexe HTML markup as shown in the examples below:</p>

<p>Example #1</p>

<pre class="lang-emmet prettyprint-override"><code>ul&gt;li*5
</code></pre>

<p>... will produce</p>

<pre class="lang-html prettyprint-override"><code>&lt;ul&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
    &lt;li&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>Example #2</p>

<pre class="lang-emmet prettyprint-override"><code>div#header+div.page+div#footer.class1.class2.class3
</code></pre>

<p>... will produce</p>

<pre class="lang-html prettyprint-override"><code>&lt;div id="header"&gt;&lt;/div&gt;
&lt;div class="page"&gt;&lt;/div&gt;
&lt;div id="footer" class="class1 class2 class3"&gt;&lt;/div&gt;
</code></pre>

<p>And list goes on. There are more examples at <a href="https://docs.emmet.io/abbreviations/syntax/" rel="nofollow noreferrer">https://docs.emmet.io/abbreviations/syntax/</a></p>

<p>And there is a library for doing that using jQuery. It's called Emmet.js and available at <a href="https://github.com/christiansandor/Emmet.js" rel="nofollow noreferrer">https://github.com/christiansandor/Emmet.js</a></p>


blocks|key|689374|text|下面的代码帮助您生成响应式html表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|689375|#javascript|689376|(function($){
var+data+=+[{
++++"head+1":+"row1+col+1",
++++"head+2":+"row1+col+2",
++++"head+3":+"row1+col+3"
},+{
++++"head+1":+"row2+col+1",
++++"head+2":+"row2+col+2",
++++"head+3":+"row2+col+3"
},+{
++++"head+1":+"row3+col+1",
++++"head+2":+"row3+col+2",
++++"head+3":+"row3+col+3"
}];
for+(var+i+=+0;+i+<+data.length;+i%2B%2B)+{
++++var+accordianhtml+=+"<button+class='accordion'>"+%2B+data[i][small_screen_heading]+%2B+"<span+class='arrow+rarrow'>&#8594;</span><span+class='arrow+darrow'>&#8595;</span></button><div+class='panel'><p><table+class='accordian_table'>";
++++var+table_row+=+null;
++++var+table_header+=+null;
++++for+(var+key+in+data[i])+{
++++++++accordianhtml+=+accordianhtml+%2B+"<tr><th>"+%2B+key+%2B+"</th><td>"+%2B+data[i][key]+%2B+"</td></tr>";
++++++++if+(i+===+0+&&+true)+{
++++++++++++table_header+=+table_header+%2B+"<th>"+%2B+key+%2B+"</th>";
++++++++}
++++++++table_row+=+table_row+%2B+"<td>"+%2B+data[i][key]+%2B+"</td>"
++++}
++++if+(i+===+0+&&+true)+{
++++++++table_header+=+"<tr>"+%2B+table_header+%2B+"</tr>";
++++++++$(".mv_table+#simple_table").append(table_header);
++++}
++++table_row+=+"<tr>"+%2B+table_row+%2B+"</tr>";
++++$(".mv_table+#simple_table").append(table_row);
++++accordianhtml+=+accordianhtml+%2B+"</table></p></div>";
++++$(".mv_table+.accordian_content").append(accordianhtml);
}
}(jquery)|code-block|syntax|javascript|689377|在这里我们可以看到演示responsive+html+table+generator|offset|length|689378|entityMap|0|LINK|mutability|MUTABLE|url|https://www.htmlcodegenerator-tools.com/2019/11/html-responsive-table-generator-blogger-mobile.html^0|0|0|0|B|V|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@]|9|@$K|Y|L|Z|1|10]]|A|$]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Here the below code helps to generate responsive html table</p>
<p>#javascript</p>
<pre><code>(function($){
var data = [{
    &quot;head 1&quot;: &quot;row1 col 1&quot;,
    &quot;head 2&quot;: &quot;row1 col 2&quot;,
    &quot;head 3&quot;: &quot;row1 col 3&quot;
}, {
    &quot;head 1&quot;: &quot;row2 col 1&quot;,
    &quot;head 2&quot;: &quot;row2 col 2&quot;,
    &quot;head 3&quot;: &quot;row2 col 3&quot;
}, {
    &quot;head 1&quot;: &quot;row3 col 1&quot;,
    &quot;head 2&quot;: &quot;row3 col 2&quot;,
    &quot;head 3&quot;: &quot;row3 col 3&quot;
}];
for (var i = 0; i &lt; data.length; i++) {
    var accordianhtml = &quot;&lt;button class='accordion'&gt;&quot; + data[i][small_screen_heading] + &quot;&lt;span class='arrow rarrow'&gt;&amp;#8594;&lt;/span&gt;&lt;span class='arrow darrow'&gt;&amp;#8595;&lt;/span&gt;&lt;/button&gt;&lt;div class='panel'&gt;&lt;p&gt;&lt;table class='accordian_table'&gt;&quot;;
    var table_row = null;
    var table_header = null;
    for (var key in data[i]) {
        accordianhtml = accordianhtml + &quot;&lt;tr&gt;&lt;th&gt;&quot; + key + &quot;&lt;/th&gt;&lt;td&gt;&quot; + data[i][key] + &quot;&lt;/td&gt;&lt;/tr&gt;&quot;;
        if (i === 0 &amp;&amp; true) {
            table_header = table_header + &quot;&lt;th&gt;&quot; + key + &quot;&lt;/th&gt;&quot;;
        }
        table_row = table_row + &quot;&lt;td&gt;&quot; + data[i][key] + &quot;&lt;/td&gt;&quot;
    }
    if (i === 0 &amp;&amp; true) {
        table_header = &quot;&lt;tr&gt;&quot; + table_header + &quot;&lt;/tr&gt;&quot;;
        $(&quot;.mv_table #simple_table&quot;).append(table_header);
    }
    table_row = &quot;&lt;tr&gt;&quot; + table_row + &quot;&lt;/tr&gt;&quot;;
    $(&quot;.mv_table #simple_table&quot;).append(table_row);
    accordianhtml = accordianhtml + &quot;&lt;/table&gt;&lt;/p&gt;&lt;/div&gt;&quot;;
    $(&quot;.mv_table .accordian_content&quot;).append(accordianhtml);
}
}(jquery)
</code></pre>
<p>Here we can see the demo <a href="https://www.htmlcodegenerator-tools.com/2019/11/html-responsive-table-generator-blogger-mobile.html" rel="nofollow noreferrer" >responsive html table generator</a></p>


<p>I have on page div:</p>

<pre><code>&lt;div id="here_table"&gt;&lt;/div&gt;
</code></pre>

<p>and in jquery:</p>

<pre><code>for(i=0;i&lt;3;i++){
    $('#here_table').append( 'result' +  i );
}
</code></pre>

<p>this generating for me:</p>

<pre><code>&lt;div id="here_table"&gt;
    result1 result2 result3 etc
&lt;/div&gt;
</code></pre>

<p>I would like receive this in table:</p>

<pre><code>&lt;div id="here_table"&gt;
    &lt;table&gt;
          &lt;tr&gt;&lt;td&gt;result1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;result2&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;result3&lt;/td&gt;&lt;/tr&gt;
    &lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>I doing:</p>

<pre><code>$('#here_table').append(  '&lt;table&gt;' );

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

 $('#here_table').append(  '&lt;/table&gt;' );
</code></pre>

<p>but this generate for me:</p>

<pre><code>&lt;div id="here_table"&gt;
    &lt;table&gt; &lt;/table&gt; !!!!!!!!!!
          &lt;tr&gt;&lt;td&gt;result1&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;result2&lt;/td&gt;&lt;/tr&gt;
          &lt;tr&gt;&lt;td&gt;result3&lt;/td&gt;&lt;/tr&gt;
&lt;/div&gt;
</code></pre>

<p>Why? how can i make this correctly?</p>

<p>LIVE: <a href="http://jsfiddle.net/n7cyE/" rel="noreferrer">http://jsfiddle.net/n7cyE/</a></p>


Create table with jQuery - append

服务器

jQuery

JSON

我在div页上有：<div id="here_table"></div>在jquery中：for(i=0;i<3;i++){    $('#here_table').append( 'result' +  i );}这为我生成了：<div id="here_table">    result1 result2 resu...

问使用jQuery创建表格- append
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery创建表格- appendEN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问使用jQuery创建表格- append
EN