Problem: Trying to get certain elements from a associative array, by using a loop. The loop is for multiple times i will go through. This associative array is associated to an array key. Ex: {eid0:{...},eid1:{...}}
It's to update a page with JS using DOM an no refresh. I've gone over StackOverflow and some other sites. I've looked in books. I can't seem to figure it out.
function display_oddsbet(id) {
var ds = document.getElementById("ds");
var tr = document.createElement("tr");
var td = document.createElement("td");
var tr0 = document.createElement("tr");
var tr1 = document.createElement("tr");
var tbl = document.createElement("table");
var tdsp = document.createElement("td");
var tdlg = document.createElement("td");
var tdloc = document.createElement("td");
var tda = document.createElement("td");
var tdh = document.createElement("td");
var tdsd = document.createElement("td");
var i;
var cnt= 0;
for (var s in id) {
var v = id[s];
for (var t in v) {
var k = v[t];
// for (var f in k) {
var ed = "eid" + cnt;
var i = v[ed];
cnt++;
console.log(i);
tr.classList = "eid" + cnt;
var a = i.awayteam_name;
var h = i['hometeam_name'];
var sd = i['startdate'];
var sport = i['sport_name'];
var league = i['league_name'];
var loc = i['location_name'];
tdsp.innerHTML = sport;
tdlg.innerHTML = league;
tdloc.innerHTML = loc;
tr0.appendChild(tdsp);
tr0.appendChild(tdloc);
tr0.appendChild(tdlg);
tbl.appendChild(tr0);
tda.innerHTML = a;
tdh.innerHTML = h;
tdsd.innerHTML = sd;
tr1.appendChild(tdsd);
tr1.appendChild(tda);
tr1.appendChild(tdh);
tbl.appendChild(tr1);
tr.appendChild(tbl);
// left
if (i['oddsbet'] == "1") {
td.innerHTML = "1";
td.style = "oddsbet";
tr.appendChild(td);
}
// 2 is on right
if (i['oddsbet'] == "2") {
td.innerHTML = "2";
td.classList = "oddsbet";
tr.appendChild(td);
}
// middle
else {
td.innerHTML = i['oddsbet'];
td.classList = "oddsbet";
tr.appendChild(td);
}
ds.appendChild(tr);
// }
}
}
return;
}
I get nothing doing this. I need to get i['awayteam_name']; and the rest from an API.
Don't ever forget. Garbage in Garbage out..
function display_oddsbet(id) {
var ds = document.getElementById("ds");
var tr = document.createElement("tr");
var td = document.createElement("td");
var tr0 = document.createElement("tr");
var tr1 = document.createElement("tr");
var tbl = document.createElement("table");
var tdsp = document.createElement("td");
var tdlg = document.createElement("td");
var tdloc = document.createElement("td");
var tda = document.createElement("td");
var tdh = document.createElement("td");
var tdsd = document.createElement("td");
Object.keys(id).forEach(function(key, index) {
var j = this[key];
Object.keys(j).forEach(function(key, index) {
//console.log(this[index]);
var ed = "eid" + cnt;
//var i = v[ed];
cnt++;
console.log(j[key]);
tr.classList = "eid" + cnt;
var a = j[key].awayteam_name;
var h = j[key]['hometeam_name'];
var sd = j[key]['startdate'];
var sport = j[key]['sport_name'];
var league = j[key]['league_name'];
var loc = j[key]['location_name'];
tdsp.innerHTML = sport;
tdlg.innerHTML = league;
tdloc.innerHTML = loc;
tr0.appendChild(tdsp);
tr0.appendChild(tdloc);
tr0.appendChild(tdlg);
tbl.appendChild(tr0);
tda.innerHTML = a;
tdh.innerHTML = h;
tdsd.innerHTML = sd;
tr1.appendChild(tdsd);
tr1.appendChild(tda);
tr1.appendChild(tdh);
tbl.appendChild(tr1);
tr.appendChild(tbl);
// left
if (j[key].oddsbet == "1") {
td.innerHTML = "1";
td.style = "oddsbet";
tr.appendChild(td);
}
// 2 is on right
if (j[key].oddsbet == "2") {
td.innerHTML = "2";
td.classList = "oddsbet";
tr.appendChild(td);
}
// middle
else {
td.innerHTML = j[key].oddsbet;
td.classList = "oddsbet";
tr.appendChild(td);
}
ds.appendChild(tr);
// }
}, j);
}, id);
return;
}
Related
So I saved some data in localStorage.
I get them back from localstorage to the table.
When I click on the button to enter new data, the data entered earlier is duplicated in the table. When I refresh the page, everything is fine.
$(document).ready(function() {
function save() {
list.forEach(function(item) {
var nameNode = document.createTextNode(item.name);
var surnameNode = document.createTextNode(item.surname);
var dataNode = document.createTextNode(item.data);
var nrNode = document.createTextNode(item.nr);
var tdName = document.createElement("td");
var tdSurname = document.createElement("td");
var tdData = document.createElement("td");
var tdNr = document.createElement("td");
tdName.appendChild(nameNode);
tdSurname.appendChild(surnameNode);
tdData.appendChild(dataNode);
tdNr.appendChild(nrNode);
var tr = document.createElement("tr");
tr.appendChild(tdName);
tr.appendChild(tdSurname);
tr.appendChild(tdData);
tr.appendChild(tdNr);
// download table and insert cells and rows
var table = document.getElementById("table");
table.appendChild(tr);
});
}
list = jQuery.parseJSON(localStorage.getItem("osoba") === null ? [] : localStorage.getItem("osoba"));
save();
$("#send").click(function() {
var osoba = {};
osoba["name"] = document.getElementById("name").value;
osoba["surname"] = document.getElementById("subname").value;
osoba["data"] = document.getElementById("date_bth").value;
osoba["nr"] = document.getElementById("numer_phone").value;
list.push(osoba);
localStorage.setItem("osoba", JSON.stringify(list));
document.getElementById("name").value = "";
document.getElementById("surname").value = "";
document.getElementById("date_bth").value = "";
document.getElementById("numer_phone").value = "";
save();
});
});
How to avoid duplication in the table without reloading the page?
When you save, you need to first clear the data already on the table or it will be added to it again when you call save. Here's how you do that:
$(document).ready(function(){
function save() {
$("#table tr").remove(); // <- this
list.forEach(function (item) {
var nameNode = document.createTextNode(item.name);
var surnameNode = document.createTextNode(item.surname);
var dataNode = document.createTextNode(item.data);
var nrNode = document.createTextNode(item.nr);
var tdName = document.createElement("td");
var tdSurname = document.createElement("td");
var tdData = document.createElement("td");
var tdNr = document.createElement("td");
tdName.appendChild(nameNode);
tdSurname.appendChild(surnameNode);
tdData.appendChild(dataNode);
tdNr.appendChild(nrNode);
var tr =document.createElement("tr");
tr.appendChild(tdName);
tr.appendChild(tdSurname);
tr.appendChild(tdData);
tr.appendChild(tdNr);
// download table and insert cells and rows
var table = document.getElementById("table");
table.appendChild(tr);
});
}
list = jQuery.parseJSON(localStorage.getItem("osoba") === null ? [] : localStorage.getItem("osoba"));
save();
$("#send").click(function(){
var osoba = {};
osoba["name"] = document.getElementById("name").value;
osoba["surname"] = document.getElementById("subname").value;
osoba["data"] = document.getElementById("date_bth").value;
osoba["nr"] = document.getElementById("numer_phone").value;
list.push(osoba);
localStorage.setItem("osoba",JSON.stringify(list));
document.getElementById("name").value="";
document.getElementById("surname").value="";
document.getElementById("date_bth").value="";
document.getElementById("numer_phone").value="";
save();
});
});
I'm trying to create an app that retrieves data from Firebase and show it in a table using JavaScript. The problem is that it’s showing me “undefined” in the app and in the console and when I try to print the values directly from the functions they contain a value, so can anyone please help me with this?
This is my code:
function doSomething() {
var something = firebase.database().ref('*****');
//comment selection
something.on('value', function gotData(data) {
var values = data.val();
var keys = Object.keys(values);
var i = 0;
while (i < keys.length) {
var k = keys[i];
var comments = values[k].comment;
var idU = values[k].id;
var idS = values[k].idservice;
var nom = getuser(idU);
var service = getservice(idS);
var tr = document.createElement('tr');
var td = document.createElement('td');
var td2 = document.createElement('td');
var td3 = document.createElement('td');
var t = document.createTextNode(i + ':' + comments);
var t2 = document.createTextNode(nom);
var t3 = document.createTextNode(service);
td.appendChild(t);
td2.appendChild(t2);
td3.appendChild(t3);
tr.appendChild(td);
tr.appendChild(td2);
tr.appendChild(td3);
document.getElementById("commentsection").appendChild(tr);
i++;
}
}, errData);
}
function getuser(IdU) {
var users = firebase.database().ref('******');
users.on('value', function getData(data) {
var values = data.val();
var keys = Object.keys(values);
var j = 0;
while (j < keys.length) {
var k = keys[j];
if (k === IdU) {
var name = values[k].nom;
console.log(name);
return name;
break;
} else {
console.log('not found');
break;
}
j++;
}
}, errData);
}
function getservice(IdS) {
var service = firebase.database().ref('******');
service.on('value', function getData(data) {
var values = data.val();
var keys = Object.keys(values);
var s = 0;
while (s < keys.length) {
var k = keys[s];
if (k === IdS) {
var nomservice = values[k].nomservice
console.log(nomservice);
return nomservice;
break;
} else {
return false;
}
s++;
}
}, errData);
}
function errData(err) {
console.log('error!');
console.log(err);
}
This is a screenshot for what I get:
var oTable;
$(document).ready(function() {
loadSubMenus();
});
function loadSubMenus() {
var resultStringX = $.ajax({
type : "POST",
url : "getSubMenuList",
dataType : 'text',
async : false
}).responseText;
resultStringX = $.trim(resultStringX);
var o = JSON.parse(resultStringX);
var idArray = new Array();
var nameArray = new Array();
idArray = o.result.subMenuId;
nameArray = o.result.subMenuName;
var tableObj = $("#tableId").val();
var colCount = 0;
var trObj = document.createElement("tr");
for (var i = 0; i < idArray.length; i++) {
var tdObj = document.createElement("td");
var inputElem = document.createElement("input");
inputElem.type = "checkbox";
inputElem.setAttribute("id", "id_"+i);
inputElem.setAttribute("value", idArray[i]);
inputElem.style.marginTop = "-1px";
var spanObj = document.createElement("span");
spanObj.innerHTML = nameArray[i];
tdObj.appendChild(inputElem);
tdObj.appendChild(spanObj);
trObj.appendChild(tdObj);
colCount++;
if (colCount == 5) {
tableObj.appendChild(trObj);
trObj = "";
trObj = document.createElement("tr");
colCount = 0;
}
if (idArray.length < 5) {
if ((idArray.length - 1) == i) {
tableObj.appendChild(trObj);
}
}
}
if(idArray.length/5>0){
tableObj.appendChild(trObj);
}
document.getElementById("subMenuCount").value=idArray.length;
}
am not getting output..
i want to load menu n sub-menu from the database
what is error am nt able to get pls help me
how to solve this.
what i have to do..
what is the error
in another jsp page i created "tableid" so there i defined td
tableObj is not a DOM element. It is the value of $("#tableId").val(). Probably you need to create it also as a DOM element:
var tableObj = document.createElement("table");
...
I'm trying to generate a table dynamically using a userscript.
var divWrap = document.createElement('div');
divWrap.style.fontFamily = "sans-serif";
divWrap.style.width = "100%";
var spanTitle = document.createElement('span');
spanTitle.style.marginRight = "auto";
spanTitle.style.marginLeft = "auto";
spanTitle.style.fontSize = "1.5em";
spanTitle.innerHTML = "Countdown";
divWrap.appendChild(spanTitle);
var createTable = document.createElement('table');
createTable.style.marginLeft = "auto";
createTable.style.marginRight = "auto";
createTable.style.width = "50%";
createTable.id = "cdn_table"
divWrap.appendChild(createTable);
createTable.appendChild(addRow("test", "12d"));
createTable.appendChild(addRow("test2", "24h"));
mainDiv.getElementsByTagName('span')[0].appendChild(divWrap);
function addRow(rName, rValue) {
console.log(rName + ": " + rValue);
var row = document.createElement('tr');
var tName = document.createElement('td');
tName.innerHTML = rName;
var tValue = document.createElement('td');
tValue.innerHTML = rValue;
row.appendChild(tName);
row.appendChild(tValue);
return row;
}
The problem is that all elements are rendered in one line like this: http://i.imgur.com/MjMtdDg.png
Is there some css value I'm missing? Or something else? I want to insert simple title and table in that thumbnail with Scriptish in Firefox..
Tables have their own interface for adding rows/cells.
var t = document.createElement("table");
var r = t.insertRow(-1);
var c = r.insertCell(-1);
c.innerHTML = "Foo";
c = r.insertCell(-1);
c.innerHTML = "Bar";
document.body.appendChild(t);
http://jsfiddle.net/tQWm8/1/
I have this javascript code to add html elements dynamically. It works perfectly in chrome but it doesn´t work in IE, nothing happens, just seems to add spaces that are maybe divs. Please Help Me!!
<script type="text/javascript">
var numero = 0;
evento = function (evt) {
return (!evt) ? event : evt;
}
addCampo = function () {
nDiv = document.createElement('div');
nDiv.className = 'material';
nDiv.id = 'material' + (++numero);
nTabla = document.createElement('table');
nTabla.width = '800';
nTabla.cellPadding = '3';
nTabla.cellSpacing = '0';
nTabla.id = 'formularioContacto';
nTR = document.createElement('tr');
nTD4 = document.createElement('td');
nTD4.className = 'labelEntrega';
nTD5 = document.createElement('td');
nTD5.className = 'labelEntrega';
nTD6 = document.createElement('td');
nTD6.className = 'labelEntrega';
nTD7 = document.createElement('td');
nTD7.className = 'labelEntrega';
nTD8 = document.createElement('td');
nTD8.className = 'labelEntrega';
nTD9 = document.createElement('td');
nTD9.className = 'labelEntrega';
nIMG = document.createElement('img');
nIMG.src = '../../images/btnBuscar1.gif';
nIMG.width = '100';
nIMG.height = '28';
nIMG.name = 'imagen[]';
nIMG.border = '0';
nIMG.vAlign = 'bottom';
nCampo = document.createElement('input');
nCampo.name = 'codigo' + (numero);
nCampo.type = 'text';
nCampo.size = '10';
nCampo.id = 'formularioContactoCampoCodigo' + (numero);
var onchange1 = "buscaMateriales(this,";
var onchange2 = numero;
var onchange3 = ")";
var onchange = onchange1 + onchange2 + onchange3;
nCampo.setAttribute('onchange', onchange);
//nCampo.style = 'font-family:Arial';
nCampo1 = document.createElement('input');
nCampo1.name = 'unidad' + (numero);
nCampo1.type = 'text';
nCampo1.size = '10';
nCampo1.id = 'formularioContactoCampoUnidad' + (numero);
//nCampo1.style = 'font-family:Arial';
nCampo1.readOnly = 'readonly';
nCampo4 = document.createElement('input');
nCampo4.name = 'id' + (numero);
nCampo4.type = 'hidden';
nCampo4.size = '10';
nCampo4.id = 'formularioContactoCampoID' + (numero);
//nCampo4.style = 'font-family:Arial';
nCampo4.readOnly = 'readonly';
nCampo2 = document.createElement('input');
nCampo2.name = 'cantidad' + (numero);
nCampo2.type = 'text';
nCampo2.size = '5';
nCampo2.id = 'formularioContactoCampoCantidad';
//nCampo2.style = 'font-family:Arial';
nCampo3 = document.createElement('input');
nCampo3.name = 'descripcion' + (numero);
nCampo3.type = 'text';
nCampo3.size = '50';
nCampo3.id = 'formularioContactoCampoDescripcion' + (numero);
//nCampo3.style = 'font-family:Arial';
nCampo3.readOnly = 'readonly';
a1 = document.createElement('a');
a1.name = nDiv.id;
a1.href = '../../include/consultarMaterial.php?id=' + (numero);
a1.target = '_blank';
a = document.createElement('a');
a.name = nDiv.id;
a.href = '#';
a.onclick = elimCamp;
a.innerHTML = 'Eliminar';
nDiv.appendChild(nTabla);
nTabla.appendChild(nTR);
nTR.appendChild(nTD4);
nTD4.appendChild(nCampo);
nTD4.appendChild(nCampo4);
nTR.appendChild(nTD5);
nTD5.appendChild(nCampo1);
nTR.appendChild(nTD6);
nTD6.appendChild(nCampo2);
nTR.appendChild(nTD7);
nTD7.appendChild(nCampo3);
nTR.appendChild(nTD8);
nTD8.appendChild(a1);
a1.appendChild(nIMG);
nTR.appendChild(nTD9);
nTD9.appendChild(a);
container = document.getElementById('adjuntos');
container.appendChild(nDiv);
}
elimCamp = function (evt) {
evt = evento(evt);
nCampo = rObj(evt);
div = document.getElementById(nCampo.name);
div.parentNode.removeChild(div);
}
rObj = function (evt) {
return evt.srcElement ? evt.srcElement : evt.target;
}
</script>
In IE, you can't append a TR element to a TABLE unless you first put it in a TBODY, THEAD, or TFOOT element.
Reference: http://webbugtrack.blogspot.com/2007/11/bug-171-dynamic-table-dom-gotcha-in-ie.html
#Ricardo: Here's the short version of what you need...
Table
+- TBody <=== This is REQUIRED when building a table DOM in IE
+- TR
+-TD
+-TD
+-TD
nTabla = document.createElement('table');//create your table
...
nTBody = document.createElement('tbody');//ADD THIS
...
nTR = document.createElement('tr');
nTR.appendChild(nTD);//add TDs to TRs
...
nTBody.appendChild(nTR);//add TRs to TBody
...
nTabla.appendChild(nTBody);//add TBody to Table