Question

我有一个调用数据的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>

抱歉看起来很乱。

Answer 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>

Answer 2

＆＃13;

 $(() => {

            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


        });

＆＃13;

<!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>

＆＃13;

将jquery ajax（json）追加到表中

2 个答案: