When using child_added to populate a table, I use append() to show the data on the HTML table, but how do I do it with child_changed? Should I delete the row and then append a new one with the changed information? If so, how do I delete this row? Or maybe use something else instead of append() to update the data on the HTML table?
HTML Table
<table id="tableAssets" class="mdl-data-table mdl-js-data-table mdl-shadow--2dp">
<thead>
<tr id="tableHeader">
<th class="mdl-data-table__cell--non-numeric">Name</th>
<th class="mdl-data-table__cell--non-numeric">Brand</th>
<th class="mdl-data-table__cell--non-numeric"> </th>
</tr>
</thead>
<tbody id="table_body"> </tbody>
</table>
JavaScript
rootRef.on("child_added", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
$("#table_body").append("<tr data-id='"+assetKey+"'>"+
"<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td></tr>");
});
For child added use id in tr
rootRef.on("child_added", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
$("#table_body").append("<tr id='row"+assetKey+"'>"+
"<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td></tr>");
});
For Child Changed
rootRef.on("child_changed", snap => {
var assetKey = snap.child("id").val();
var name = snap.child("name").val();
var brand = snap.child("brand").val();
editrow = "row"+assetKey;
document.getElementById("editrow").innerHTML = "<td class='mdl-data-table__cell--non-numeric'>" + name + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'>" + brand + "</td>" +
"<td class='mdl-data-table__cell--non-numeric'><div buttons>"+
"<button class='delete-btn'><i class='material-icons'>delete</i></button>"+" "+
"</div></td>");
});
This will help.
Related
I create table with print out data from database like this:
here the JS and HTML.
JS
function initDataTableSaldoRek1() {
showLoadingCss()
$.ajax({
url: baseUrl + "api_dashboard/get_ivest",
dataType: 'JSON',
type: "GET",
success: function (res) {
var data = res.return;
$("#date").html(data[0].TANGGAL);
$('#table-invest tbody').empty();
$.each(data, function (key, val) {
var html = "<tr>" +
"<td>" + val.DATE + "</td>" +
"<td>" + val.TYPE + "</td>" +
"<td align='right'>" + accounting.formatNumber(val.USD,2,".",",") + "</td>" +
"<td align='right' >" + accounting.formatNumber(val.EUR,2,".",",") + "</td>" +
"</tr>";
$('#table-invest tbody').append(html);
});
hideLoadingCss()
},
});
}
HTML
<div class="view-table" >
<table id="table-invest" class="table table-bordered">
<thead>
<tr>
<th style="background-color: #67a2d8" width="12.5%">DATE</th>
<th style="background: #67a2d8" width="12.5%">TYPE OF PAYMENT</th>
<th style="background: #67a2d8" width="12.5%">EUR</th>
<th style="background: #67a2d8" width="12.5%">USD</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
and i want add a row every 3 rows that sum column 2 & 3 as below .
Everybody in here have ever experience to create table as below before in JavaScript?
Thank you..
Just make a check on each third row, since the $.each callback provides an index value.
function initDataTableSaldoRek1() {
showLoadingCss()
$.ajax({
url: baseUrl + "api_dashboard/get_ivest",
dataType: 'JSON',
type: "GET",
success: function (res) {
var data = res.return;
$("#date").html(data[0].TANGGAL);
let html = "<tr>" +
"<td>" + val.DATE + "</td>" +
"<td>" + val.TYPE + "</td>" +
"<td align='right'>" + accounting.formatNumber(val.USD, 2, ".", ",") + "</td>" +
"<td align='right' >" + accounting.formatNumber(val.EUR, 2, ".", ",") + "</td>" +
"</tr>";
$('#table-invest tbody').append(html);
$('#table-invest tbody').empty();
$.each(data, function (key, val) {
if ((key+1) % 3 === 0 ){
html = `<tr><td>TOTAL</td></tr> ${html}`;
}else{
return html;
}
});
hideLoadingCss()
},
});
}
You can simply use a counter, when this counter reaches the amount of rows you want, add the "total" row and reset the counter.
Also, keep track of the total value (I don't know which total you want to calculate, so it is up to you this part), inside the if to check the counter, reset this total too.
Something like this:
let counter = 0;
let sumTotal = 0;
$.each(data, function(key, val) {
var html = "<tr>" +
"<td>" + val.DATE + "</td>" +
"<td>" + val.TYPE + "</td>" +
"<td align='right'>" + accounting.formatNumber(val.USD, 2, ".", ",") + "</td>" +
"<td align='right' >" + accounting.formatNumber(val.EUR, 2, ".", ",") + "</td>" +
"</tr>";
sumTotal = 0;//USE YOUR LOGIC TO CALCULATE AND INCREASE TOTAL
$('#table-invest tbody').append(html);
counter++;
//check if it is the moment to add the new row total
if (counter == 3){
let newRow = "<tr>" +
"<td>Total: " + sumTotal + "</td>" +
"</tr>";
$('#table-invest tbody').append(newRow);
counter = 0;
sumTotal = 0;
}
});
I'm just trying to do this but I keep getting only countries[i].Code instead of the image, can anyone help me out with this ?
function flist(){
var list = document.querySelector("#flist");
var myRows = "";
for(var i=0; i < countries.length; i++){
myRows += "<tr>" +
"<td>" + "<figure>" + "<img src=" + "\"" + "/flags/"+ countries[i].Code +
".png" + "\"" + "alt=" + "\"" + countries[i].Code + "\"" + "height=" +"\""+ "14"+ "\"" + " width=" + "\"" +"14" + "\""+ ">" +"</figure>" + "</td>" +
"<td>" + countries[i].Code + "</td>" +
"<td>" + countries[i].Name.English + "</td>" +
"<td>" + countries[i].Continent + "</td>" +
"<td>" + countries[i].AreaInKm2.toString()+ "</td>" +
"<td>" + countries[i].Population.toString() + "</td>" +
"<td>" + countries[i].Capital + "</td>" +
"</tr>";
}
list.innerHTML += myRows;
};
Example of Countires
var countries = [
{
Code: "AF",
Continent: "Asia",
AreaInKm2: 652230,
Population: 35530081,
Capital: "Kabul",
Name: {
"English": "Afghanistan",
"Arabic": "أفغانستان",
"Chinese": "阿富汗",
"Franch": "Afghanistan",
"Hindi": "अफ़ग़ानिस्तान",
"Korean": "아프가니스탄",
"Japanese": "アフガニスタン",
"Russian": "Афганистан"
}
Im trying to make a table in the HTML of each county and in the begging to have a flag
<h4 id="subtitle">List of Countries and Dependencies</h4>
<table id="outputTable">
<thead>
<tr>
<th>Flag</th>
<th>Code</th>
<th id="countyrName">Country/Dep. Name</th>
<th>Continent</th>
<th>Area (Km<sup>2</sup>)</th>
<th>Population</th>
<th>Capital</th>
</tr>
</thead>
<tbody id="flist"></tbody>
</table>
If you use singles quotes for dealing with building HTML in javascript, you don't have to escape the double quotes around params and is less prone to making mistakes.
myRows += '<tr>' +
'<td><figure><img src="/flags/' + countries[i].Code + '.png" alt="' + countries[i].Code + '" height="14" width="14" /></figure></td>' +
'<td>' + countries[i].Code + '</td>' +
'<td>' + countries[i].Name.English + '</td>' +
'<td>' + countries[i].Continent + '</td>' +
'<td>' + countries[i].AreaInKm2.toString()+ '</td>' +
'<td>' + countries[i].Population.toString() + '</td>' +
'<td>' + countries[i].Capital + '</td>' +
'</tr>';
I'd be keeping your HTML as HTML, keep it out of the JavaScript. If you change from a table to ul you now have to go rewrite your javascript.
Set a hidden template. Make a copy of the template to work with and remove the template all together. Then you can clone the template an replace values as needed without needing to worry about your HTML structure.
var countries = [{
Code: "AF",
Continent: "Asia",
AreaInKm2: 652230,
Population: 35530081,
Capital: "Kabul",
Name: {
"English": "Afghanistan",
"Arabic": "أفغانستان",
"Chinese": "阿富汗",
"Franch": "Afghanistan",
"Hindi": "अफ़ग़ानिस्तान",
"Korean": "아프가니스탄",
"Japanese": "アフガニスタン",
"Russian": "Афганистан"
}}]
//Make a clone out of tempate
var template = document.getElementById("rowTemplate").cloneNode(true);
template.removeAttribute("id")
console.log(template);
//get rid of original we done't need it any more
document.getElementById("flist").innerHTML = "";
function flist() {
var list = document.querySelector("#flist");
var myRows = "";
for (var i = 0; i < countries.length; i++) {
//make a working copy of the template
var workingTemplate = template.cloneNode(true);
//Do the replace
workingTemplate.innerHTML = workingTemplate.innerHTML
.replace(/{{code}}/g, countries[i].Code)
.replace(/{{name}}/g, countries[i].Name.English)
.replace(/{{continent}}/g, countries[i].Continent)
.replace(/{{area}}/g, countries[i].AreaInKm2)
.replace(/{{population}}/g, countries[i].Population)
.replace(/{{capital}}/g, countries[i].Capital);
myRows += workingTemplate.outerHTML;
}
//update the table
list.innerHTML += myRows;
};
flist();
#rowTemplate {
display: none;
}
<h4 id="subtitle">List of Countries and Dependencies</h4>
<table id="outputTable">
<thead>
<tr>
<th>Flag</th>
<th>Code</th>
<th id="countyrName">Country/Dep. Name</th>
<th>Continent</th>
<th>Area (Km<sup>2</sup>)</th>
<th>Population</th>
<th>Capital</th>
</tr>
</thead>
<tbody id="flist">
<tr id="rowTemplate">
<td class="img">
<figure><img src="/flags/{{code}}" alt="{{code}}" height="14" width="14"></figure>
</td>
<td>{{code}}</td>
<td>{{name}}</td>
<td>{{continent}}</td>
<td>{{area}}</td>
<td>{{population}}</td>
<td>{{capital}}</td>
</tr>
</tbody>
</table>
I'm trying to load a table via post ajax, but it's not loading properly.
table:
<table class="table table-responsive table-hover table-striped" id="tableestoque" style="font-size:12px;">
<thead>
<tr>
<th>Nome Empresa</th>
<th>Qtd</th>
</tr>
</thead>
<tbody></tbody>
</table>
And here is how I am loading:
$.each(data.listaEstoque, function (i, item) {
$("#tableestoque").append("<tr"
+ "<td>" + item.empresaProduto.nome + "</td>"
+ "<td>" + item.qtd + "</td>"
+ "</tr>")
});
It is loading like this, I want you to load each one into a column, and if you have more rows, each in a row.
I created sample fiddle for you. Right now you are iterating over each element, not over each object. You should iterate over object using forEach statement.
var data = [{
id: 1,
name: 'Name1'
}, {
id: 2,
name: 'Name2'
}];
var $table = $("#tableestoque");
var $tr, $td1, $td2;
data.forEach(function(item) {
$tr = $('<tr>');
$td1 = $('<td>' + item.id + '</td>');
$td2 = $('<td>' + item.name + '</td>');
$tr.append($td1).append($td2);
$table.append($tr);
});
It looks like you need to append your html to <tbody> like this:
$.each(data.listaEstoque, function (i, item) {
$("#tableestoque tbody").append("<tr"
+ "<td>" + item.empresaProduto.nome + "</td>"
+ "<td>" + item.qtd + "</td>"
+ "</tr>")
});
I am trying to populate an html table of JSON data. I was provided the JSON data and cannot determine why it isn't populating but suspect the JSON may not be formatted properly. When I use other sample data it works, then when I sub in the JSON I was provided it doesn't work. I've tried copying the JSON into a file on my direct server, linking to what I was provided (here: https://boiling-fortress-75456.herokuapp.com/) and inserting it on myjson.com and reformatting the JSON data.
Here is my code:
<script>
$(function() {
var entries = [];
var dmJSON = "https://api.myjson.com/bins/6sjud?callback=?";
$.getJSON(dmJSON, function(data) {
$.each(data.entries, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.rank + "</td>" + "<td>" + f.name + "</td>" + "<td>" + f.march_rank + "</td>" + "<td> " + f.april_rank + "</td>" + "<td>" + f.may_rank + "</td>" + f.personal_volume + "</td>" + f.team_volume + "</td>" + "</tr>"
$(tblRow).appendTo("#incentive tbody");
});
});
});
</script>
<div class="wrapper">
<div class="profile">
<table id= "incentive" border="1">
<thead>
<th>Rank</th>
<th>Name</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>Highest Rank</th>
<th>Personal Volume</th>
<th>Team Volume</th>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
You need to get the objects from affiliate
$.each(data.affiliate, function(i, f) {
var tblRow = "<tr>" + "<td>" + f.rank + "</td>" + "<td>" + f.name + "</td>" + "<td>" + f.march_rank + "</td>" + "<td> " + f.april_rank + "</td>" + "<td>" + f.may_rank + "</td>" + f.personal_volume + "</td>" + f.team_volume + "</td>" + "</tr>"
$(tblRow).appendTo("#incentive tbody");
});
Response from service
{
"affiliate":[{
"rank":1,"name":"Sally","march_rank":"Gold","april_rank":"Silver","may_rank":"Silver","highest_rank":"Silver","team_volume":12345
},{
"rank":2,"name":"Zelda","march_rank":"Gold","april_rank":"Bronze","may_rank":"Silver","highest_rank":"Gold","team_volume":12345
}
]
}
I want to empty the data inside tbody, I tried:
$("#detail_tbody").html("");
$("#detail_tbody").empty();
but the result is that the current page is cleared.
When i click the next page,the data will show again.How can i empty all of them?
<table id="detail_table">
<tr align="center">
<th style="display: none;"></th>
<th width="100px">1</th>
<th width="130px">2</th>
<th width="130px">3</th>
<th width="130px">4</th>
<th width="130px">5</th>
<th width="130px">6</th>
<th width="130px">7</th>
</tr>
<tbody id="detail_tbody"></tbody>
</table>
The js is :
for (var i = 0; i < productTradeDetail_list.length; i++) {
productTradeDetail_listobj = productTradeDetail_list[i];
p += "<tr align=\"center\">" +
"<td style='display: none;'>" + i + "</td>" + //
"<td>" + productTradeDetail_listobj.procode + "</td>" +
"<td>" + productTradeDetail_listobj.proname + i + "</td>" +
"<td>" + productTradeDetail_listobj.tradename + "</td>" +
"<td>" + productTradeDetail_listobj.confirmatm + "</td>" +
"<td>" + productTradeDetail_listobj.confirmvol + "</td>" +
"<td>" + productTradeDetail_listobj.statename + "</td>" +
"<td>" + productTradeDetail_listobj.tradedata + "</td></tr>";
}
$("#detail_tbody").empty();
$("#detail_tbody").append(p);
page = new Page(5, "detail_table", "detail_tbody");
$("#tradeDetail_pageLabel").val(page.pageIndex + 1 + "/" + page.pageCount);
ADD:I have two response,i need clear current data of response and show another when i change into next response.