Ibrahim İnce Ibrahim İnce - 3 years ago 164
Ajax Question

append jquery ajax (json) to table

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

My html table look like this:

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

I am trying to show elements like a table:

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()
.done(function (data) {
var item = data.filter(function (obj) {
return obj.name === info || obj.ID === info;
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();

and Html part is:

<a href="index.html" id="logo">
<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>
<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 id="loader" style="display:none;"><img src="loader.gif" /></div>
<section class="section">
<div class="liper">
<table class="table"></table>
<p id="ERROR" /> </p>

Sorry its looks very messy.

Answer Source

Like this?

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download