복붙노트

[JQUERY] HTML 테이블에 JSON 데이터를 표시합니다

JQUERY

HTML 테이블에 JSON 데이터를 표시합니다

해결법

  1. 1.이 시도:

    이 시도:

    CSS :

    .hidden{display:none;}

    HTML :

    <table id="table" class="hidden">
    <tr>
        <th>City</th>
        <th>Status</th>
    </tr>
</table>

    JS :

    $('#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++){
                        if(data[i].city && data[i].cStatus){
                            txt += "<tr><td>"+data[i].city+"</td><td>"+data[i].cStatus+"</td></tr>";
                        }
                    }
                    if(txt != ""){
                        $("#table").append(txt).removeClass("hidden");
                    }
                }
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
    return false;//suppress natural form submission
});

  2. 2.당신이 이미 가지고있는 답변의 대안으로, 그리고이 게시물을 accross로 옮기는 다른 사람들을 위해. 나는 최근에 비슷한 일을했고 저에게 그것을하기 위해 작은 jQuery 플러그를 만들었습니다. 그것의 꽤 작은 3KB 미만이며, 정렬, 페이징 및 열을 보여주고 숨길 수있는 능력을 가지고 있습니다.

    당신이 이미 가지고있는 답변의 대안으로, 그리고이 게시물을 accross로 옮기는 다른 사람들을 위해. 나는 최근에 비슷한 일을했고 저에게 그것을하기 위해 작은 jQuery 플러그를 만들었습니다. 그것의 꽤 작은 3KB 미만이며, 정렬, 페이징 및 열을 보여주고 숨길 수있는 능력을 가지고 있습니다.

    CSS를 사용하여 사용자 정의하기가 쉽습니다. 자세한 정보는 http://mrjsontable.azurewebsites.net/ 와이 프로젝트를 사용할 수 있습니다. github https://github.com/matchingradar/mr.jsontable에서 원하는대로 할 수 있습니다.

    작업하기 위해서는 파일을 다운로드하고 사이트에서 팝업하십시오. 지침을 따르면 다음과 같은 것으로 끝나야합니다.

    <div id="citytable"></div>

    그런 다음 Ajax 성공 방법에서는 이런 식으로 원할 것입니다.

    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
    });
}

    다른 사람이 도움이되기를 바랍니다!

  3. 3.그렇게하기위한 많은 플러그인이 있습니다. 나는 일반적으로 DataTables를 사용합니다. http://datatables.net/

    그렇게하기위한 많은 플러그인이 있습니다. 나는 일반적으로 DataTables를 사용합니다. http://datatables.net/

  4. 4.

              <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>" + value.city + "</td><td>" + value.cStatus + "</td></tr>");
                               $("#myData").append(row);
                            });
                        },
                        error: function(jqXHR, textStatus, errorThrown){
                            alert('error: ' + textStatus + ': ' + errorThrown);
                        }
                    });
                    return false;//suppress natural form submission
                }); 

   </script>

    데이터를 루프하고 위의 코드와 같은 테이블에 추가하십시오.

  5. 5.나는 다음 함수를 임의의 json 객체에서 생성하는 HTML 테이블을 생성하기 위해 다음과 같은 함수를 작성했습니다.

    나는 다음 함수를 임의의 json 객체에서 생성하는 HTML 테이블을 생성하기 위해 다음과 같은 함수를 작성했습니다.

    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%;"/>').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="'+json+'">'+json+'</a>';
        }
        return json;
    } else {
        return ''+json;
    }
};

    그래서 단순히 전화 할 수 있습니다.

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

  6. 6.JSON 객체에서 결과를 얻으려면 DataTable을 사용하십시오. DataTable은 JSON 결과를 검색 가능하고 정렬 가능한 열의 시설로 자동으로 테이블 형식으로 변환하는 것과 동일한 방식으로 작동합니다.

    JSON 객체에서 결과를 얻으려면 DataTable을 사용하십시오. DataTable은 JSON 결과를 검색 가능하고 정렬 가능한 열의 시설로 자동으로 테이블 형식으로 변환하는 것과 동일한 방식으로 작동합니다.

  7. 7.이 시도:

    이 시도:

      <!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+' * '+obj[props]);
                        tabCell.innerHTML = obj[props];
                    }

            }
        }
    }

    iterate(obj,table,tr);

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

    }
    </script>
    </html>

  8. 8.

    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++){

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



        },
        error: function(jqXHR, textStatus, errorThrown){
            alert('error: ' + textStatus + ': ' + errorThrown);
        }
    });
    return false;
});

  9. 9.아래에서 가장 간단하고 가장 빠른 방법으로 JSON 데이터를 표준 HTML 테이블로 변환하려면 아래 링크를 확인하십시오.

    아래에서 가장 간단하고 가장 빠른 방법으로 JSON 데이터를 표준 HTML 테이블로 변환하려면 아래 링크를 확인하십시오.

    http://crunchify.com/crunchifyjsontohtml-js-json-to-html-table-converter-script/

    10. from https://stackoverflow.com/questions/19901843/display-json-data-in-html-table by cc-by-sa and MIT license

'JQUERY' 카테고리의 다른 글

[JQUERY] jQuery : unbind 이벤트 핸들러가 나중에 다시 묶을 수 없습니다.  (0) 2020.11.03
[JQUERY] jQuery Ajax - Ajax 호출을 할 때 네트워크 연결 오류를 감지하는 방법  (0) 2020.11.03
[JQUERY] jQuery에서 show ()와 숨기기 ()를 사용하여 지연 ()을 어떻게 사용할 수 있습니까?  (0) 2020.11.03
[JQUERY] jQuery를 사용하여 JavaScript 객체의 속성을 반복합니다  (0) 2020.11.03
[JQUERY] jQuery가있는 이미지로드 및 DOM에 추가하십시오.  (0) 2020.11.03
,

티스토리툴바