I'm try to use append to fill my table. Please take a look
<table width="100%" id="tbltbl" class="asoy table table-bordered table-striped">
<thead>
<tr>
<th width="1%">No</th>
<th width="14%">Outlet</th>
<th width="14%">Leader</th>
<th width="14%">Chief</th>
<th width="14%">RM</th>
<th> Action </th>
</tr>
</thead>
</table>
for default my table look like this
I run the onchange method and i receive this
[{"OutletCode":"K-BDIP3","Description":"BANDUNG INDAH PLAZA 3","NipLeader":"0802400","NipRM":"0802678"
,"NipChief":"-"},{"OutletCode":"K-CMHM2","Description":"KIOS CIMAHI MALL 2","NipLeader":"0802400","NipRM"
:"0802678","NipChief":"-"},{"OutletCode":"K-TSPA3","Description":"TASIK PLAZA ASIA 3","NipLeader":"0802400"
,"NipRM":"0802678","NipChief":"-"},{"OutletCode":"K-BDCW2","Description":"KIOS BANDUNG CIWALK 2","NipLeader"
:"0802400","NipRM":"0802678","NipChief":"-"}]
then i append it
function byarea(){
$(".asoy").empty();
var area = $("#pilihanarea").val();
var tipe = $('#tipe').val();
var formUrl = "<?=base_url();?>arealeader/finddata";
var angka = 1;
$.ajax({
url: formUrl,
type: 'POST',
data: {tipe:tipe,area:area},
success: function(data, textStatus, jqXHR){
var newdata = JSON.parse(data);
$.each(newdata, function(key, val) {
$('.asoy').append('<tbody><tr> <td>'+ (angka++) +'</td>' +
'<td>' + val.OutletCode + '</td>' +
'<td>' + val.NipLeader + '</td>' +
'<td>' + val.NipChief +'</td>' +
'<td>' + val.NipRM +'</td>' +
'<td>----</td>' +
'</tr></tbody></thead>');
});
}
});
}
and my table look like this
It seems I'm loosing my <thead>..</thead> section. Any solution for this ? thanks in advance...
Create an empty <tbody class="asoy"></tbody> just before the closing </table> tag and remove the class "asoy" from the <table> tag. Then remove the <tbody> tags from your call to append().
At the moment, your $(".asoy").empty(); is removing the entire table contents but you only want to clear the body, not the headers. Creating a <tbody> tag solves that problem while still allowing your function to be re-entrant (i.e. you can run it again later and it won't duplicate the contents).
Based on your code
$('.asoy').append('<tbody>
<tr> <td>'+ (angka++) +'</td>' +
'<td>' + val.OutletCode + '</td>' +
'<td>' + val.NipLeader + '</td>' +
'<td>' + val.NipChief +'</td>' +
'<td>' + val.NipRM +'</td>' +
'<td>----</td>' +
'</tr>
</tbody>
</thead>'); // <--- What this tag for?
I'm not sure but I think its a wrong tagging.
tbody should not be inside a thead unless your
header will consist of another table element
Related
I am trying to retrieve data from my firebase realtime database, and then append them onto my HTML table. However, I don't have any ideas on how to create the HTML table that is selectable and submit what I selected. Here is how my database tree looks like.
Here is the HTML table I made.
<table class="hotel-list" id="Marriott-hotel-list">
<thead class="thead-inverse">
<tr>
<th>Hotel Name</th>
<th>Hotel Location</th>
<th>Cheap Room's Price</th>
<th>Amount of Cheap Room</th>
<th>Expensive Room's Price</th>
<th>Amount of Cheap Room</th>
</tr>
</thead>
<tbody>
<tr id="tr">
<td id="Hotel-Name"></td>
<td id="Hotel-location"></td>
<td id="Cheap-Rooms-Price"></td>
<td id="Amount-of-Cheap-Room"></td>
<td id="Expensive-Rooms-Price"></td>
<td id="Amount-of-Cheap-Room"></td>
</tr>
</tbody>
</table>
and here is the js that I used to try to append data onto the table.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
var database = firebase.database();
database.ref('projectTable/hotelTable/Hilton/').orderByChild('hotel_name').once('value', function (snapshot) {
if (snapshot.exists()) {
var content = '';
snapshot.forEach(function (data) {
var val = data.val();
content += '<tr>';
content += '<td>' + val.hotel_name + '</td>';
content += '<td>' + val.Location + '</td>';
content += '<td>' + val.cheap_room_price + '</td>';
content += '<td>' + val.max_amount_cheap_room + '</td>';
content += '<td>' + val.expensive_room_price + '</td>';
content += '<td>' + val.max_amount_expensive_room + '</td>';
content += '</tr>';
});
$('#Marriott-hotel-list').append(content);
}
});
</script>
I try to put the hotel name, Location, cheap_room_price, max_amount_cheap_room, expensive_room_price, max_amount_expensive_room, these values from the database onto the table.
But nothing shows on the web page and also I realize the table I made has no selectable feature.
Can any expert point out my error and help me fix it in Javascript? Thank you and much appreciation!
I'm trying to develop a simple way to turn a .json file into an HTML table using javascript.
I've tried using a file upload input, text input, html form, as well as appending data from one .json file to another empty container .json file. The main thing(s) I'm trying to fix are located on lines 3, 5, and 17.
What I want to happen is the user inputs the name of the .json file via the text field (or just uploads the file), and the program turns it into an html table, but I can't figure out how to use a variable to implement that.
<script>
$(function() {
var whatname = document.getElementById("whatnametext")
var people = [];
$.getJSON(whatname, function(data) {
$.each(data.person, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.firstName + "</td>" +
"<td>" + f.lastName + "</td>" + "<td>" + f.job + "</td>" + "<td>" + f.roll + "</td>" + "</tr>"
$(tblRow).appendTo("#userdata tbody");
});
});
});
</script>
</head>
<body>
<input type="text" id="whatnametext">
<div class="wrapper">
<div class="profile">
<table id= "userdata" border="2">
<thead>
<th>First Name</th>
<th>Last Name</th>
<th>Email Address</th>
<th>City</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>```
I am creating a web page and I want to give a alert whenever I clicked a row of the generated table that is generated by the below code. In order to do that I am using setAlert(message) function.
My problem is that it only works when the parameter that is set to the function is a integer. it doesn't work when it is a String.
Help me solve this problem.
Thank you.
function getItemList(){
$('#tableItem').empty();
$.ajax({
url: 'ItemServlet',
data:{version:2},
type: 'post',
dataType: 'json',
success: function (data) {
$('#tableItem').append('<table class="table table-striped table-hover" id="table1">\n\
<thead><tr><th class="table-text-align-centre" style="width:10%">Item Code</th>\n\
<th class="table-text-align-centre" style="width:20%">Name</th>\n\
<th class="table-text-align-centre" style="width:50%">Description</th>\n\
<th class="table-text-align-centre" style="width:10%">Stock Count</th>\n\
<th class="table-text-align-centre" style="width:10%">Active</th></tr></thead><tbody class="table-hover"></tbody></table>');
var length = data.length;
for (i = 0; i < length; i++) {
var post = data[i];
$('#table1').append('<tr onClick="setAlert('+post['itm_code']+')"><td>' + post['it_name'] + '</td>\n\
<td class="table-text-align-centre">' + post['itm_name'] + '</td>\n\
<td class="table-text-align-centre">' + post['itm_description'] + '</td> \n\
<td class="table-text-align-centre">' + post['itm_stockcount'] + '</td> \n\
<td class="table-text-align-centre">' + post['active'] + '</td> \n\
</tr>');
}
}
});
}
function setAlert(message) {
var id = message+ "";
alert(id);
}
The issue here is that you are passing your parameters into the setAlert function without defining the quotes. Now because you are using " to define your onClick and your using ' to formulate you html, you need to use an apostrophe escaped \' to pass in the parameter.
So currently, if post['itm_code'] is 1, it will generate the following html with valid javascript:
<tr onClick="setAlert(1)"><td>
However if post['itm_code'] is a string "my string", it will render the following html with invalid javascript:
<tr onClick="setAlert(my string)"><td>
So the following line:
<tr onClick="setAlert('+post['itm_code']+')"><td>
should be changed to:
<tr onClick="setAlert(\''+post['itm_code']+'\')"><td>
I have a table and for one of the <td> I want to generate the <a> tags dynamically using JavaScript.
Writing a small snippet of the code.
<table class="table">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
#foreach (var item in list)
{
<tr>
<td>...</td>
<td>...</td>
<td> MyFunction(item.Parameter1) </td> // dynamic anchor tag
</tr>
}
</tbody>
</table>
JavaScript function.
MyFunction(Parameter1)
{
var aTag = "";
.....
..... //some formatting as per needs
aTag = '<a id="' + someId + '" alt="' + someAlt + '" title="' + someTitle + '" style ="color:Blue;text-decoration:underline;" href="#" onclick="fnAnotherFunction(' + P1 + ',' + P2 + ');">' + NameofTheTag + '</a>';
return aTag;
}
How can the string returning aTag form an <a> tag at the <tr> <td>..?
Is this possible or is their a better solution to this.
You could use .append() or .appendTo()
$('selectorForTD).append(MyFunction(item.Parameter1))`
or
var anch = MyFunction(item.Parameter1);
anch.appendTo($('selectorForTD');
I think this is what you're after.
Edit:
Since you're using jQuery, you could create your anchor element like:
MyFunction(Parameter1)
{
// var aTag = "";
.....
..... //some formatting as per needs
var aTag = $("<a>",{id:someID, alt:someAlt, title:someTitle}).css({ ...cssRules...}).click(function(e)
{
fnAnotherFunction(P1,P2);
});
return aTag;
}
Here's a quick fiddle to illustrate.
What I am trying to do is retrieve the information passed from a previous page through and display this within a table on another page.
I have currently got the following code:
PAGE NAME: EMBELLISHMENT
<script>
var embellishmentlist_var = embellishment;
var embellishment_explode = embellishmentlist_var.split("#");
for(var i = 1; i < embellishment_explode.length; i++)
{
var embellishment_explode_singleinfo = embellishment_explode.split("_");
//var table = '<tr><td>' + embellishment_explode[3] + '</td><td>' + data[7] + '</td><td>' + data[1] + '</td><td>' + data[2] + '</td><td>' + data[4] + '</td><td>' + data[5] + '</td>' + data1 + '<td>' + data[9] + '</td></tr>';
var table = '<tr><td></td></tr>';
$('#tableshow > tr').append( table );
//alert(embellishment_explode[4]);
}
}
</script>
<html>
<table>
<tr id="tableshow">
</tr>
</table>
The foreach can loop round a maximum of 6 times which I hope will create 6 rows within the table however this does not seem to be working. I currently have similar code to the above on another page however the HTML is slightly different. On that page the HTML looks like the following:
PAGE NAME: INFO
<table id="items_table">
<th>1</th>
<th>2</th>
///etc
</table>
The Javascript on that page insert rows into the table. This all works.
Therefore the only difference between the two pages is that on the EMBELLISHMENT page I want to create table rows within a table whereas on the INFO page I am creating the complete table.
Could I please have some assistance even if it is just to say it isn't possible.
You're trying to append table rows to a table row. That's not possible. You could only add rows to a table
HTML
<table id="tableshow"></table>
JS
for(var i = 0; i <= 6; i++){
$('#tableshow').append('<tr><td></td></tr>');
}