追加jQuery的AJAX（JSON）表

我有一个AJAX调用retreives数据，它的成功部分是这样的：追加jQuery的AJAX（JSON）表

$("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网址：（图标）

我该如何解决这个问题，并且有什么方法可以让项目看起来更现代一些，更有用。任何建议将不胜感激。

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>

对不起它的外观非常凌乱。

来源

2016-09-26 Ibrahim İnce

你检查它（F12），看看如果数据是在HTML代码注入？数据可能已正确显示，但表格可能没有css格式，导致您只能看到数据行。 – Klaus

您需要声明内容是HTML表格，您是否尝试过使用'.innerHTML'？或'.html（）'在jquery – Vikrant

也许一些来自你的ajax调用的数据包含HTML标签，可能会破坏你的'

'标记。你可以使用F12（开发人员工具）发布产生的HTML吗？ –

回答

是否这样？

$("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>

来源

2016-09-26 12:05:10

$(() => { 
 

 
      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>

来源

2016-09-26 12:05:22

回答

相关问题