将 jquery ajax (json) 附加到表中答案

【问题标题】：append jquery ajax (json) to table将 jquery ajax (json) 附加到表中
【发布时间】：2016-09-26 20:11:25
【问题描述】：

我有一个检索数据的 ajax 调用，它的成功部分如下所示：

$("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://.......sharepoint.com/" +item.url+ "'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a>" + "</td></tr>");

我的 html 表格如下所示：

<table class="table"></table>

我正在尝试显示像表格这样的元素：

但它显示为单句，例如：ID：002 名称：toysrus Url:(icon)

我该如何解决这个问题？有什么方法可以让物品看起来更现代和更实用。任何建议都将受到高度赞赏。

var uri = 'sharepointmodel.json';  
            function find() {
                var info = $('#KUNDE').val()
                $("#loader").show();
                   $.getJSON(uri)
                    .done(function (data) {                       
                        var item = data.filter(function (obj) {
                            return obj.name === info || obj.ID === info;
                        })[0];
                        if (typeof item ==='undefined'){
                            alert("Ukendt navn eller ID");
                        }
                        else if (typeof item !== 'undefined' || item !== null){                  
             $("table.table").append("<tr><td>ID: " + item.ID + "</td><td>Name: " + item.name +" Url:</td><td><a href='https://........sharepoint.com/" +item.url+ "'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a>" + "</td></tr>");
                      }                                                
                    })
                    .fail(function (jqXHR, textStatus, err) {                     
                        $('#ERROR').text('Kan ikke oprette forbindelse til serveren! '/* + err*/);}).always(function (){$("#loader").hide();
                    }); 
            }

而Html部分是：

<body>
    <header>
        <a href="index.html" id="logo">
            <h1></h1>
            <h2></h2>
        </a>
        <nav>
            <ul>
                <li><a href="index.html">SearchBox</a></li>
                <li><a href="http://.com/">.com</a></li>
                <li><a href="http://.com/support/">Support&Aflastning</a></li>
            </ul>
        </nav>
    </header>
                <div class="container">   
                <li class="li-myLeagues"> 
                <div style="float:left;margin-left:10px;">                      
                                <input type="text" id="KUNDE" placeholder="Search by name or ID." value="" size="60" /> 
                                <div id="loader" style="display:none;"><img src="loader.gif" /></div>    </div>  
                                <div style="float:left;margin-left:10px;">              
                                <button id="buton" type="button" class="btn-style" value="search" onclick="find();">Hent</button> 
                                </div> 
                            </li>
                    </div>
                    <div id="loader" style="display:none;"><img src="loader.gif" /></div>  
                    <section class="section">
            <div class="liper">              
                 <table class="table"></table>         
            <p id="ERROR" />  </p>
            </div>
                </section>

抱歉，它看起来很乱。

【问题讨论】：

您是否检查过它（F12）以查看数据是否注入到 html 代码中？数据可能已正确显示，但表格可能没有 css 格式，导致您只看到数据行。
您需要声明内容是 HTML Table ，您是否尝试过使用 .innerHTML ？或 .html() 在 jquery 中
也许来自您的 ajax 调用的某些数据包含可能破坏您的 <table> 标记的 HTML 标记。您可以使用 F12（开发者工具）发布生成的 HTML 吗？
你能分享你的 HTML 和 json 响应吗？
为表格和单元格添加边框，它会告诉你东西是分开的，而不是在单个语句中，使用引导 css 以获得更好的外观和感觉

标签： javascript jquery json ajax

【解决方案1】：

像这样？

$("table.table").append("<thead><tr><th>ID</th><th>Name</th><th>URL</th></tr></thead>");
$("table.table").append("<tr><td>1</td><td>MARC</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");
$("table.table").append("<tr><td>2</td><td>MICHAEL</td><td><a href='https://.......sharepoint.com'><img src='forwarding-icon.png' alt='forward' height='42' width='42'></a></td></tr>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border=1 class="table"></table>

【讨论】：

【解决方案2】：

 $(() => {

            var jsonObject = [{ id: '002', name: 'Google', Icon: 'https://t0.rbxcdn.com/98aeff8137da4af6157fb1c29836d9bc' },
            { id: '002', name: 'Fb', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' },
            { id: '002', name: 'Yahoo', Icon: 'https://t0.rbxcdn.com/875e717ac7ae0df8d133278d0c52f963' }]
            ;

            //Get the external template definition using a jQuery selector
            var template = kendo.template($("#javascriptTemplate").html());

            //Create some dummy data
            var data = jsonObject;

            var result = template(data); //Execute the template
            $("table").html(result); //Append the result


        });

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Slider</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.3.914/js/kendo.all.min.js"></script>

</head>

<body>
   
    <table></table>

    <script id="javascriptTemplate" type="text/x-kendo-template">
        <table>
            <tr> <td><b>ID</b> </td> <td> <b>Name </b>  </td> <td> <b>icon </b> </td> </tr>
            # for (var i = 0; i < data.length; i++) { #
            <tr> <td>   #= data[i].id #</td> <td>  #= data[i].name # </td> <td> <img src="#= data[i].Icon #" width="150px" height="150px"/> </td> </tr>
            # } #
        </table>
    </script>

   




</body>
</html>

【讨论】：