将jquery ajax(json)附加到表 [英] append jquery ajax (json) to table
本文介绍了将jquery ajax(json)附加到表的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个ajax调用，可以检索数据，其成功部分如下所示:
I have a ajax call that retreives data and its success portion looks like this:
$("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>
我正在尝试显示类似于表格的元素:
I am trying to show elements like a table:
但是相反，它像单个句子一样显示:ID:002名称:toysrus Url :(图标)
But instead it's shows like single sentence, like this one: ID: 002 Name: toysrus Url:(icon)
我该如何解决此问题，有什么办法可以使物品看起来更现代，更有用. 任何建议将不胜感激.
How can I solve this problem and is there any way that I can make items look little bit more modern and useful. Any suggestion will be highly appreciated.
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>
对不起，它看起来很乱.
Sorry its looks very messy.
推荐答案
喜欢吗?
$("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>
这篇关于将jquery ajax(json)附加到表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
