blocks|key|4705354|text|++++++++++<table+id="myData">

++++++++++</table>

+++++++++++<script+type="text/javascript">
++++++++++++++$('#search').click(function()+{
++++++++++++++++++++alert("submit+handler+has+fired");
++++++++++++++++++++$.ajax({
++++++++++++++++++++++++type:+'POST',
++++++++++++++++++++++++url:+'cityResults.htm',
++++++++++++++++++++++++data:+$('#cityDetails').serialize(),

++++++++++++++++++++++++success:+function(data){+
++++++++++++++++++++++++++++$.each(data,+function(+index,+value+)+{
+++++++++++++++++++++++++++++++var+row+=+$("<tr><td>"+%2B+value.city+%2B+"</td><td>"+%2B+value.cStatus+%2B+"</td></tr>");
+++++++++++++++++++++++++++++++$("#myData").append(row);
++++++++++++++++++++++++++++});
++++++++++++++++++++++++},
++++++++++++++++++++++++error:+function(jqXHR,+textStatus,+errorThrown){
++++++++++++++++++++++++++++alert('error:+'+%2B+textStatus+%2B+':+'+%2B+errorThrown);
++++++++++++++++++++++++}
++++++++++++++++++++});
++++++++++++++++++++return+false;//suppress+natural+form+submission
++++++++++++++++});+

+++</script>|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4705355|循环遍历数据并将其附加到一个表中，如上面的代码所示。|unstyled|4705356|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$B|C]]|$1|D|3|E|5|F|7|J|8|@]|9|@]|A|$]]|$1|G|3|-4|5|F|7|K|8|@]|9|@]|A|$]]]|H|$]]

<pre><code>          &lt;table id="myData"&gt;

          &lt;/table&gt;

           &lt;script type="text/javascript"&gt;
              $('#search').click(function() {
                    alert("submit handler has fired");
                    $.ajax({
                        type: 'POST',
                        url: 'cityResults.htm',
                        data: $('#cityDetails').serialize(),

                        success: function(data){ 
                            $.each(data, function( index, value ) {
                               var row = $("&lt;tr&gt;&lt;td&gt;" + value.city + "&lt;/td&gt;&lt;td&gt;" + value.cStatus + "&lt;/td&gt;&lt;/tr&gt;");
                               $("#myData").append(row);
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                            alert('error: ' + textStatus + ': ' + errorThrown);
                        }
                    });
                    return false;//suppress natural form submission
                }); 

   &lt;/script&gt;
</code></pre>

<p>loop through the data and append it to a table like the code above.</p>


blocks|key|4705378|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4705379|CSS：|4705380|.hidden{display:none;}|code-block|syntax|javascript|4705381|HTML：|4705382|<table+id="table"+class="hidden">
++++<tr>
++++++++<th>City</th>
++++++++<th>Status</th>
++++</tr>
</table>|4705383|JS：|4705384|$('#search').click(function()+{
++++$.ajax({
++++++++type:+'POST',
++++++++url:+'cityResults.htm',
++++++++data:+$('#cityDetails').serialize(),
++++++++dataType:"json",+//to+parse+string+into+JSON+object,
++++++++success:+function(data){+
++++++++++++if(data){
++++++++++++++++var+len+=+data.length;
++++++++++++++++var+txt+=+"";
++++++++++++++++if(len+>+0){
++++++++++++++++++++for(var+i=0;i<len;i%2B%2B){
++++++++++++++++++++++++if(data[i].city+&&+data[i].cStatus){
++++++++++++++++++++++++++++txt+%2B=+"<tr><td>"%2Bdata[i].city%2B"</td><td>"%2Bdata[i].cStatus%2B"</td></tr>";
++++++++++++++++++++++++}
++++++++++++++++++++}
++++++++++++++++++++if(txt+!=+""){
++++++++++++++++++++++++$("#table").append(txt).removeClass("hidden");
++++++++++++++++++++}
++++++++++++++++}
++++++++++++}
++++++++},
++++++++error:+function(jqXHR,+textStatus,+errorThrown){
++++++++++++alert('error:+'+%2B+textStatus+%2B+':+'+%2B+errorThrown);
++++++++}
++++});
++++return+false;//suppress+natural+form+submission
});|4705385|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|T|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|V|8|@]|9|@]|A|$]]|$1|K|3|L|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|M|3|N|5|6|7|X|8|@]|9|@]|A|$]]|$1|O|3|P|5|F|7|Y|8|@]|9|@]|A|$G|H]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>Try this:</p>

<p>CSS:</p>

<pre><code>.hidden{display:none;}
</code></pre>

<p>HTML:</p>

<pre><code>&lt;table id="table" class="hidden"&gt;
    &lt;tr&gt;
        &lt;th&gt;City&lt;/th&gt;
        &lt;th&gt;Status&lt;/th&gt;
    &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>JS:</p>

<pre><code>$('#search').click(function() {
    $.ajax({
        type: 'POST',
        url: 'cityResults.htm',
        data: $('#cityDetails').serialize(),
        dataType:"json", //to parse string into JSON object,
        success: function(data){ 
            if(data){
                var len = data.length;
                var txt = "";
                if(len &gt; 0){
                    for(var i=0;i&lt;len;i++){
                        if(data[i].city &amp;&amp; data[i].cStatus){
                            txt += "&lt;tr&gt;&lt;td&gt;"+data[i].city+"&lt;/td&gt;&lt;td&gt;"+data[i].cStatus+"&lt;/td&gt;&lt;/tr&gt;";
                        }
                    }
                    if(txt != ""){
                        $("#table").append(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
    return false;//suppress natural form submission
});
</code></pre>


blocks|key|4705401|text|检查下面的链接，以最简单和最快的方式将JSON数据转换为标准HTML表。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4705402|http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/|offset|length|4705403|entityMap|0|LINK|mutability|MUTABLE|url^0|0|0|28|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|N|8|@]|9|@$D|O|E|P|1|Q]]|A|$]]|$1|F|3|-4|5|6|7|R|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|C]]]]

<p>check below link to convert JSON data to standard HTML table in the simplest and fastest way.</p>

<p><a href="http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/" rel="nofollow">http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/</a></p>


blocks|key|4705420|text|有很多插件可以做到这一点。我通常使用数据表，它工作得很好。http://datatables.net/|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4705421|entityMap|0|LINK|mutability|MUTABLE|url|http://datatables.net/^0|T|M|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>There are many plugins for doing that. I normally use datatables it works great. <a href="http://datatables.net/" rel="nofollow">http://datatables.net/</a></p>


blocks|key|199554|text|作为你已经有的答案的替代，以及其他遇到这篇文章的人。我最近有一个类似的任务，并创建了一个小的jquery插件来为我做这件事。它非常小，小于3KB，并且具有排序、分页和显示和隐藏列的能力。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|199555|使用css进行自定义应该是相当容易的。更多信息可以在这里找到http://mrjsontable.azurewebsites.net/，该项目可供您在github+https://github.com/MatchingRadar/Mr.JsonTable上随心所欲地操作。|offset|length|199556|要使其正常工作，请下载这些文件并将其弹出到您的站点中。按照说明操作，您应该会得到类似以下内容的结果：|199557|<div+id="citytable"></div>|code-block|syntax|javascript|199558|然后，在ajax成功方法中，您将需要如下内容|199559|success:+function(data){+
++++$("#citytable").mrjsontable({
++++++++tableClass:+"my-table",
++++++++pageSize:+10,+//you+can+change+the+page+size+here
++++++++columns:+[
++++++++++++new+$.fn.mrjsontablecolumn({
++++++++++++++++heading:+"City",
++++++++++++++++data:+"city"
++++++++++++}),
++++++++++++new+$.fn.mrjsontablecolumn({
++++++++++++++++heading:+"City+Status",
++++++++++++++++data:+"cStatus"
++++++++++++})
++++++++],
++++++++data:+data
++++});
}|199560|希望对其他人有帮助！|199561|entityMap|0|LINK|mutability|MUTABLE|url|http://mrjsontable.azurewebsites.net/|1|https://github.com/MatchingRadar/Mr.JsonTable^0|0|U|11|0|2A|19|1|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|12|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|13|8|@]|9|@$D|14|E|15|1|16]|$D|17|E|18|1|19]]|A|$]]|$1|F|3|G|5|6|7|1A|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|1B|8|@]|9|@]|A|$K|L]]|$1|M|3|N|5|6|7|1C|8|@]|9|@]|A|$]]|$1|O|3|P|5|J|7|1D|8|@]|9|@]|A|$K|L]]|$1|Q|3|R|5|6|7|1E|8|@]|9|@]|A|$]]|$1|S|3|-4|5|6|7|1F|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|Z]]|10|$5|V|W|X|A|$Y|11]]]]

<p>As an alternative to the answers you already have, and for others that come accross this post. I recently had a similar task and created a small jquery plug in to do it for me. Its pretty small under 3KB minified, and has sorting, paging and the ability to show and hide columns. </p>

<p>It should be pretty easy to customize using css. More information can be found here <a href="http://mrjsontable.azurewebsites.net/" rel="nofollow">http://mrjsontable.azurewebsites.net/</a> and the project is available for you to do as you wish with on github <a href="https://github.com/MatchingRadar/Mr.JsonTable" rel="nofollow">https://github.com/MatchingRadar/Mr.JsonTable</a></p>

<p>To get it to work download the files and pop them in your site. Follow the instructions and you should end up with something like the following:  </p>

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

<p>Then in the ajax success method you will want something like this</p>

<pre><code>success: function(data){ 
    $("#citytable").mrjsontable({
        tableClass: "my-table",
        pageSize: 10, //you can change the page size here
        columns: [
            new $.fn.mrjsontablecolumn({
                heading: "City",
                data: "city"
            }),
            new $.fn.mrjsontablecolumn({
                heading: "City Status",
                data: "cStatus"
            })
        ],
        data: data
    });
}
</code></pre>

<p>Hope it helps somebody else!</p>


blocks|key|199579|text|如果您想从json对象中获取结果，请使用datatable。Datatable还以同样的方式将json结果转换为表格格式，并具有自动搜索和排序列的功能。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|199580|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Please use datatable if you want to get result from json object. Datatable also works in the same manner of converting the json result into table format with the facility of searchable and sortable columns automatically.</p>


blocks|key|199605|text|我创建了以下函数来从任意JSON对象生成html表：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|199606|function+toTable(json,+colKeyClassMap,+rowKeyClassMap){
++++let+tab;
++++if(typeof+colKeyClassMap+===+'undefined'){
++++++++colKeyClassMap+=+{};
++++}
++++if(typeof+rowKeyClassMap+===+'undefined'){
++++++++rowKeyClassMap+=+{};
++++}

++++const+newTable+=+'<table+class="table+table-bordered+table-condensed+table-striped"+/>';
++++if($.isArray(json)){
++++++++if(json.length+===+0){
++++++++++++return+'[]'
++++++++}+else+{
++++++++++++const+first+=+json[0];
++++++++++++if($.isPlainObject(first)){
++++++++++++++++tab+=+$(newTable);
++++++++++++++++const+row+=+$('<tr+/>');
++++++++++++++++tab.append(row);
++++++++++++++++$.each(+first,+function(+key,+value+)+{
++++++++++++++++++++row.append($('<th+/>').addClass(colKeyClassMap[key]).text(key))
++++++++++++++++});

++++++++++++++++$.each(+json,+function(+key,+value+)+{
++++++++++++++++++++const+row+=+$('<tr+/>');
++++++++++++++++++++$.each(+value,+function(+key,+value+)+{
++++++++++++++++++++++++row.append($('<td+/>').addClass(colKeyClassMap[key]).html(toTable(value,+colKeyClassMap,+rowKeyClassMap)))
++++++++++++++++++++});
++++++++++++++++++++tab.append(row);
++++++++++++++++});

++++++++++++++++return+tab;
++++++++++++}+else+if+($.isArray(first))+{
++++++++++++++++tab+=+$(newTable);

++++++++++++++++$.each(+json,+function(+key,+value+)+{
++++++++++++++++++++const+tr+=+$('<tr+/>');
++++++++++++++++++++const+td+=+$('<td+/>');
++++++++++++++++++++tr.append(td);
++++++++++++++++++++$.each(+value,+function(+key,+value+)+{
++++++++++++++++++++++++td.append(toTable(value,+colKeyClassMap,+rowKeyClassMap));
++++++++++++++++++++});
++++++++++++++++++++tab.append(tr);
++++++++++++++++});

++++++++++++++++return+tab;
++++++++++++}+else+{
++++++++++++++++return+json.join(",+");
++++++++++++}
++++++++}

++++}+else+if($.isPlainObject(json)){
++++++++tab+=+$(newTable);
++++++++$.each(+json,+function(+key,+value+)+{
++++++++++++tab.append(
++++++++++++++++$('<tr+/>')
++++++++++++++++++++.append($('<th+style="width:+20%25;"/>').addClass(rowKeyClassMap[key]).text(key))
++++++++++++++++++++.append($('<td+/>').addClass(rowKeyClassMap[key]).html(toTable(value,+colKeyClassMap,+rowKeyClassMap))));
++++++++});
++++++++return+tab;
++++}+else+if+(typeof+json+===+'string')+{
++++++++if(json.slice(0,+4)+===+'http'){
++++++++++++return+'<a+target="_blank"+href="'%2Bjson%2B'">'%2Bjson%2B'</a>';
++++++++}
++++++++return+json;
++++}+else+{
++++++++return+''%2Bjson;
++++}
};|code-block|syntax|javascript|199607|所以你可以简单的调用：|199608|$('#mydiv').html(toTable([{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]));|199609|entityMap^0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|M|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|N|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|O|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|K|3|-4|5|6|7|Q|8|@]|9|@]|A|$]]]|L|$]]

<p>I created the following function to generate an html table from an arbitrary JSON object:</p>

<pre><code>function toTable(json, colKeyClassMap, rowKeyClassMap){
    let tab;
    if(typeof colKeyClassMap === 'undefined'){
        colKeyClassMap = {};
    }
    if(typeof rowKeyClassMap === 'undefined'){
        rowKeyClassMap = {};
    }

    const newTable = '&lt;table class="table table-bordered table-condensed table-striped" /&gt;';
    if($.isArray(json)){
        if(json.length === 0){
            return '[]'
        } else {
            const first = json[0];
            if($.isPlainObject(first)){
                tab = $(newTable);
                const row = $('&lt;tr /&gt;');
                tab.append(row);
                $.each( first, function( key, value ) {
                    row.append($('&lt;th /&gt;').addClass(colKeyClassMap[key]).text(key))
                });

                $.each( json, function( key, value ) {
                    const row = $('&lt;tr /&gt;');
                    $.each( value, function( key, value ) {
                        row.append($('&lt;td /&gt;').addClass(colKeyClassMap[key]).html(toTable(value, colKeyClassMap, rowKeyClassMap)))
                    });
                    tab.append(row);
                });

                return tab;
            } else if ($.isArray(first)) {
                tab = $(newTable);

                $.each( json, function( key, value ) {
                    const tr = $('&lt;tr /&gt;');
                    const td = $('&lt;td /&gt;');
                    tr.append(td);
                    $.each( value, function( key, value ) {
                        td.append(toTable(value, colKeyClassMap, rowKeyClassMap));
                    });
                    tab.append(tr);
                });

                return tab;
            } else {
                return json.join(", ");
            }
        }

    } else if($.isPlainObject(json)){
        tab = $(newTable);
        $.each( json, function( key, value ) {
            tab.append(
                $('&lt;tr /&gt;')
                    .append($('&lt;th style="width: 20%;"/&gt;').addClass(rowKeyClassMap[key]).text(key))
                    .append($('&lt;td /&gt;').addClass(rowKeyClassMap[key]).html(toTable(value, colKeyClassMap, rowKeyClassMap))));
        });
        return tab;
    } else if (typeof json === 'string') {
        if(json.slice(0, 4) === 'http'){
            return '&lt;a target="_blank" href="'+json+'"&gt;'+json+'&lt;/a&gt;';
        }
        return json;
    } else {
        return ''+json;
    }
};
</code></pre>

<p>So you can simply call:</p>

<pre><code>$('#mydiv').html(toTable([{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]));
</code></pre>


blocks|key|199611|text|试试这个：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|199612|++<!DOCTYPE+html>
++++<html>
++++<head>
++++++++<title>Convert+JSON+Data+to+HTML+Table</title>
++++++++<style>
++++++++++++th,+td,+p,+input+{
++++++++++++++++font:14px+Verdana;
++++++++++++}
++++++++++++tr{
++++++++++++++++align:+right
++++++++++++}
++++++++++++table,+th,+td+
++++++++++++{
++++++++++++++++border:+solid+1px+#DDD;
++++++++++++++++border-collapse:+collapse;
++++++++++++++++padding:+2px+3px;
++++++++++++++++text-align:+center;
++++++++++++}
++++++++++++th+{
++++++++++++++++font-weight:bold;
++++++++++++}
++++++++</style>
++++</head>
++++<body>
++++++++<input+type="button"+onclick="CreateTableFromJSON()"+value="Create+Table+From+JSON"+/>
++++++++<div+id="showData"></div>
++++</body>

++++<script>
++++++++function+CreateTableFromJSON()+{
++++++++++++var+obj+=+{[{"city":"AMBALA","cStatus":"Y"},+
++++++++++++++++++++++{"city":"ASANKHURD","cStatus":"Y"},+
++++++++++++++++++++++{"city":"ASSANDH","cStatus":"Y"}]}

++++var+table+=+document.createElement('table');

++++var+tr+=+table.insertRow(-1);

++++function+iterate(obj,table,tr){

++++++++for(var+props+in+obj){

++++++++++++if(obj.hasOwnProperty(props)){

++++++++++++++++if(typeof+obj[props]=='object')
++++++++++++++++++++{
++++++++++++++++++++++++var+trNext+=+table.insertRow(-1);
++++++++++++++++++++++++var+tabCellHead+=+trNext.insertCell(-1);
++++++++++++++++++++++++var+tabCell+=+trNext.insertCell(-1);
++++++++++++++++++++++++var+table_in+=+document.createElement('table');+
++++++++++++++++++++++++var+tr_in;
++++++++++++++++++++++++var+th+=+document.createElement("th");++++++
++++++++++++++++++++++++th.innerHTML+=+props;

++++++++++++++++++++++++tabCellHead.appendChild(th);
++++++++++++++++++++++++tabCell.appendChild(table_in)
++++++++++++++++++++++++iterate(obj[props],table_in,tr_in);
++++++++++++++++++++}
++++++++++++++++else
++++++++++++++++++++{
++++++++++++++++++++++++if(tr+===+undefined)
++++++++++++++++++++++++{
++++++++++++++++++++++++++++tr+=+table.insertRow(-1);
++++++++++++++++++++++++}
++++++++++++++++++++++++var+tabCell+=+tr.insertCell(-1);
++++++++++++++++++++++++console.log(props%2B'+*+'%2Bobj[props]);
++++++++++++++++++++++++tabCell.innerHTML+=+obj[props];
++++++++++++++++++++}

++++++++++++}
++++++++}
++++}

++++iterate(obj,table,tr);

++++var+divContainer+=+document.getElementById("showData");
++++++++++++divContainer.innerHTML+=+"";
++++++++++++divContainer.appendChild(table);

++++}
++++</script>
++++</html>|code-block|syntax|javascript|199613|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>Try this:</p>

<pre><code>  &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
        &lt;title&gt;Convert JSON Data to HTML Table&lt;/title&gt;
        &lt;style&gt;
            th, td, p, input {
                font:14px Verdana;
            }
            tr{
                align: right
            }
            table, th, td 
            {
                border: solid 1px #DDD;
                border-collapse: collapse;
                padding: 2px 3px;
                text-align: center;
            }
            th {
                font-weight:bold;
            }
        &lt;/style&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;input type="button" onclick="CreateTableFromJSON()" value="Create Table From JSON" /&gt;
        &lt;div id="showData"&gt;&lt;/div&gt;
    &lt;/body&gt;

    &lt;script&gt;
        function CreateTableFromJSON() {
            var obj = {[{"city":"AMBALA","cStatus":"Y"}, 
                      {"city":"ASANKHURD","cStatus":"Y"}, 
                      {"city":"ASSANDH","cStatus":"Y"}]}

    var table = document.createElement('table');

    var tr = table.insertRow(-1);

    function iterate(obj,table,tr){

        for(var props in obj){

            if(obj.hasOwnProperty(props)){

                if(typeof obj[props]=='object')
                    {
                        var trNext = table.insertRow(-1);
                        var tabCellHead = trNext.insertCell(-1);
                        var tabCell = trNext.insertCell(-1);
                        var table_in = document.createElement('table'); 
                        var tr_in;
                        var th = document.createElement("th");      
                        th.innerHTML = props;

                        tabCellHead.appendChild(th);
                        tabCell.appendChild(table_in)
                        iterate(obj[props],table_in,tr_in);
                    }
                else
                    {
                        if(tr === undefined)
                        {
                            tr = table.insertRow(-1);
                        }
                        var tabCell = tr.insertCell(-1);
                        console.log(props+' * '+obj[props]);
                        tabCell.innerHTML = obj[props];
                    }

            }
        }
    }

    iterate(obj,table,tr);

    var divContainer = document.getElementById("showData");
            divContainer.innerHTML = "";
            divContainer.appendChild(table);

    }
    &lt;/script&gt;
    &lt;/html&gt;
</code></pre>


blocks|key|4705487|text|HTML:
+<div+id="container"></div>+++
JS:


$('#search').click(function()+{
++++$.ajax({
++++++++type:+'POST',
++++++++url:+'cityResults.htm',
++++++++data:+$('#cityDetails').serialize(),
++++++++dataType:"json",+//to+parse+string+into+JSON+object,
++++++++success:+function(data){+

++++++++++++++++var+len+=+data.length;
++++++++++++++++var+txt+=+"";
++++++++++++++++if(len+>+0){
++++++++++++++++++++for(var+i=0;i<len;i%2B%2B){

++++++++++++++++++++++++++++txt+=+"<tr><td>"%2Bdata[i].city%2B"</td><td>"%2Bdata[i].cStatus%2B"</td></tr>";
++++++++++++++++++++++++++++$("#container").append(txt);
++++++++++++++++++++}



++++++++},
++++++++error:+function(jqXHR,+textStatus,+errorThrown){
++++++++++++alert('error:+'+%2B+textStatus+%2B+':+'+%2B+errorThrown);
++++++++}
++++});
++++return+false;
});|type|code-block|depth|inlineStyleRanges|entityRanges|data|syntax|javascript|4705488|unstyled|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|G|8|@]|9|@]|A|$B|C]]|$1|D|3|-4|5|E|7|H|8|@]|9|@]|A|$]]]|F|$]]

<pre><code>HTML:
 &lt;div id="container"&gt;&lt;/div&gt;   
JS:


$('#search').click(function() {
    $.ajax({
        type: 'POST',
        url: 'cityResults.htm',
        data: $('#cityDetails').serialize(),
        dataType:"json", //to parse string into JSON object,
        success: function(data){ 

                var len = data.length;
                var txt = "";
                if(len &gt; 0){
                    for(var i=0;i&lt;len;i++){

                            txt = "&lt;tr&gt;&lt;td&gt;"+data[i].city+"&lt;/td&gt;&lt;td&gt;"+data[i].cStatus+"&lt;/td&gt;&lt;/tr&gt;";
                            $("#container").append(txt);
                    }



        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
    return false;
});
</code></pre>


<p>I get the following JSON String from server as response </p>

<pre><code>[{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]
</code></pre>

<p>Here is my Jquery Code</p>

<pre><code>$('#search').click(function() {
    alert("submit handler has fired");
    $.ajax({
        type: 'POST',
        url: 'cityResults.htm',
        data: $('#cityDetails').serialize(),
        success: function(data){ 
            alert(data);    
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
    return false;//suppress natural form submission
});
</code></pre>

<p>The alert shows the JSON String Correctly. Now i want to map this response to my table</p>

<p>say </p>

<p></p>

<p>How can i do that  ??</p>


Display JSON Data in HTML Table

数据转换

服务器

JSON

我从服务器得到以下JSON字符串作为响应[{"city":"AMBALA","cStatus":"Y"},{"city":"ASANKHURD","cStatus":"Y"},{"city":"ASSANDH","cStatus":"Y"}]下面是我的Jquery代码$('#search').click(functio...

问在HTML表格中显示JSON数据
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML表格中显示JSON数据EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在HTML表格中显示JSON数据
EN