Ibrahim İnce Ibrahim İnce - 2 months ago 15
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()
$("#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();
});
}


and Html part is:

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

Answer

Like this?

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