I have an xml feed of products:
https://feedfiles.woolytech.com/loja-domot.myshopify.com/domot_feed.xml
I'm getting problems trying to make a condition like this, when class name(from the XML) = price then this variable return the price.
I could get the values when I specified like productsXmlNode.children[4].innerHTML; but the 4th class is not the same for every product. so I want to define the class by the name and not by the number.
I will show the code above.
<script>
// first get the reference to the h1 tag
const h1 = document.querySelector("h1");
// using classList property
const h1ClassNames = h1.classList;
console.log(h1ClassNames);
let xmlContent = '';
let tableProducts = document.getElementById('entry');
fetch('produtos_domot_feed.xml').then((response)=> {
response.text().then((xml)=>{
xmlContent = xml;
let parser = new DOMParser();
let xmlDOM = parser.parseFromString(xmlContent, 'application/xml');
let products = xmlDOM.querySelectorAll('entry');
products.forEach(productsXmlNode => {
let row = document.createElement('tr');
//author (brand)
let td = document.createElement('td');
td.innerText = productsXmlNode.children[4].innerHTML;
row.appendChild(td);
// title
td = document.createElement('td');
td.innerText = productsXmlNode.children[2].innerHTML;
row.appendChild(td);
//price
td = document.createElement('td');
td.innerText = productsXmlNode.children[2].innerHTML;
row.appendChild(td);
//description
td = document.createElement('td');
td.innerText = productsXmlNode.getElementsByClassName('g:price').innerHTML;
row.appendChild(td);
//image
td = document.createElement('td');
td.innerText = productsXmlNode.children[3].innerHTML;
row.appendChild(td);
tableProducts.children[1].appendChild(row);
});
});
});
</script>
</body>
</html>
Related
const tr = document.createElement("tr");
const td = document.createElement("td");
table.appendChild(tr);
td.innerText = "" + new Date().toLocaleDateString("de-Ch");
tr.appendChild(td);
const td2 = document.createElement("td");
td2.innerText = object.text;
tr.appendChild(td2);
const td3 = document.createElement("td");
if (object.amount > 0){
td3.style.color = "rgb(4, 209, 4)";
td3.innerText = "+";
} else{
td3.style.color = "red";
}
td3.innerText += object.amount;
tr.appendChild(td3);
const td4 = document.createElement("td");
td4.style.color = saldo < 0 ? "red" : "black";
td4.innerText = saldo.toFixed(2);
tr.appendChild(td4);
Basically this code gets ran when I submit a form and it adds a tr and td's to a table which I already have as elementById. My question is, does anyone know how I could store the values, that I input, as localStorage, so that when I refresh, the table with the different rows stays as before and that I can still add more rows? I'd be very thankful for an answer. If there's more information about the code needed, I'd be happy to provide it.
You can create an object array and add it in localStorage if it is not available.
var objectArray = [];
localStorage.setItem("objectArray", JSON.stringify(objectArray))
Add objects to the array when form is submitted and update localStorage.
var objectArray = JSON.parse(localStorage.getItem("objectArray"));
objectArray.push(object);
localStorage.setItem("objectArray", JSON.stringify(objectArray));
update the table with new rows based on the objects available in the array.
var objectArray = JSON.parse(localStorage.getItem("objectArray"));
function createTable(data_array){
const billing_table_body = document.querySelector('#billing_progile_Table > tbody')
//we loop through object array and have access to each individual JSON
for(var i = 0; i<objarray.length;i++){
console.log("data : ",objarray[i].profileName)
//create row
const tr = document.createElement('tr'); //creating the row
console.log('creating new row');
//append individual tds
const td = document.createElement('td')
td.textContent = objarray[i].profileName//appends data from the json cell
td.className = 'text_td';
tr.appendChild(td);
const td_two = document.createElement('td')
td_two.textContent = objarray[i].cardemail
td.className = 'text_td';
tr.appendChild(td_two);
const td_three = document.createElement('td')
td_two.textContent = objarray[i].cardownername
td.className = 'text_td';
tr.appendChild(td_three);
const td_four = document.createElement('td')
td_two.textContent = objarray[i].cardnumber
td.className = 'text_td';
tr.appendChild(td_four);
//append whole row to tr
billing_table_body.appendChild(tr);
}
}
im trying to append the cells into the table with their data but the table won't allow me to do it and I need to write it like this because im trying to access specific objects of the json array. any help im new to JAVASCRIPT AND JSON
Please stop adding row and cells with createElement() method...!
const billing_table_body = document.querySelector('#billing_progile_Table > tbody')
function createRows(data_array)
{
data_array.forEach(el =>
{
let newRow = billing_table_body.insertRow()
newRow.insertCell().textContent = el.profileName
newRow.insertCell().textContent = el.cardemail
newRow.insertCell().textContent = el.cardownername
newRow.insertCell().textContent = el.cardnumber
newRow.querySelectorAll('td').forEach(td=>td.className='text_td')
})
}
I tried to create table but I can't create td in every tr, td is creating only in first td what is in table, how I can solve the problem?
// Creating div
var main = document.createElement("div")
main.innerHTML = ""
document.body.appendChild(main)
main.setAttribute("id", "main")
//Creating Icons
var puzzleico = document.createElement("div")
puzzleico.innerHTML = ""
document.getElementById("main").appendChild(puzzleico)
puzzleico.setAttribute("id", "puzzleico")
var puzzleico = document.getElementById("puzzleico").onclick = function() {createtable()};
//Creating tr and td
function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr")
tr.innerHTML = ""
document.getElementById("table").appendChild(tr)
tr.setAttribute("id", "tr")
var td = document.createElement("td")
td.innerHTML = ""
document.getElementById("tr").appendChild(td)
}
}
Element id's within a document need to be unique. The issue here is that your document.getElementById("tr") will always return the first element it finds with that id and so, all of your <td> elements will be appended to the first <tr>.
In order to fix it you can remove the tr.setAttribute("id", "tr") line and use the already existing tr variable to append the td child to.
function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr")
tr.innerHTML = ""
document.getElementById("table").appendChild(tr);
var td = document.createElement("td");
td.innerHTML = "test"
tr.appendChild(td)
}
}
createtable();
The above code will work, but using the already declared variables instead of finding them again can also be applied to the table case. Also, table.innerHTML = "" doesn't add any value because the innerHTML is already empty when you create a new element.
function createtable() {
//Creating Table
var table = document.createElement("table");
document.body.appendChild(table);
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr");
table.appendChild(tr);
var td = document.createElement("td");
td.innerHTML = "test";
tr.appendChild(td);
}
}
You can use this to create the table:
function createTable(){
//Creating And Appending Child
let table = document.createElement('table');
document.body.appendChild(table);
for(let i = 0; i < 50; i++){
let tr = document.createElement('tr');
let td = document.createElement('td');
td.innerHTML = i;
tr.appendChild(td);
table.appendChild(tr);
}
}
Here is the link to my codepen:
https://codepen.io/prabodhpanda/pen/gOPLqYe?editors=1010
id attribute of each element in DOM should be unique. You set same id for each tr element you create. document.getElementById element always returns the first element match by the id. This is the reason of the issue. Your last code snippet should be:
function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr")
tr.innerHTML = ""
document.getElementById("table").appendChild(tr)
tr.setAttribute("id", "tr" + i) // Check this
var td = document.createElement("td")
td.innerHTML = ""
document.getElementById("tr" + i).appendChild(td) // Check this
}
}
tr.appendChild(td) should also work if you don't need ID attribute.
I edited your answer and got what I want.
//Creating tr and td
function createtable() {
//Creating Table
var table = document.createElement("table")
table.innerHTML = ""
document.body.appendChild(table)
table.setAttribute("id", "table")
for (var i = 0; i < 50; i++) {
var tr = document.createElement("tr")
tr.innerHTML = ""
document.getElementById("table").appendChild(tr)
tr.setAttribute("id", "tr")
for (var v = 0; v < 50; v++) {
var td = document.createElement("td")
td.innerHTML = ""
tr.appendChild(td)
}
}
}
Goal
I am trying to implement a dynamic feature in my table.
Basically, what I want to do is the following:
Problem definition
1) Write 2 number values(PROGNOSE_EXP, PROGNOSE_MAIL) in my two input td's in the table (DONE)
2) In the column HOURS_USED, I want it to take into account, the given numbers inserted into the input fields e.g: (300 / 9) + (900 / 9) = 133 hours used on the given input values, 300 and 900, so instead of hardcoding the number 133 in the picture, it should calculate it.
Variables in calculation
AVG_EXP_TIME = 9
<br>
AVG_MAIL_TIME = 9
<br>
PROGNOSE_EXP = 300
<br>
PROGNOSE_MAIL = 900<br>
HOURS_USED = 133
Code:
var th = document.createElement('th');
th.className = "hours_used";
var text = document.createTextNode("Hours used")
th.appendChild(text);
row.appendChild(th);
var th = document.createElement('th');
th.className = "prognose_eks";
th.id = "digit_fast_header"
var text = document.createTextNode("Prognose exp")
th.appendChild(text);
row.appendChild(th);
var th = document.createElement('th');
th.className = "prognose_mail";
var text = document.createTextNode("Prognose mail")
th.appendChild(text);
row.appendChild(th);
tbl.appendChild(row);
var tblBody = tbl.createTBody();
var td = document.createElement('td');
td.className = "hoursUsed";
td.innerHTML = "133";
tr.appendChild(td);
var td = document.createElement('td');
td.className = "inputEks";
td.id = "inputEks"
td.innerHTML = "<input type='number' class='inpt_text' name = 'inpt[]' >";
tr.appendChild(td);
var td = document.createElement('td');
td.className = "inputMail";
td.id = "inputMail"
td.innerHTML = "<input type='number' class='inpt_text' name = 'inpt[]' >";
tr.appendChild(td);
Suppose this code to create a table with plain JavaScript using DOM (Fiddle):
var table = document.createElement('table');
for (var i = 1; i < 4; i++){
var tr = document.createElement('tr');
var td1 = document.createElement('td');
var td2 = document.createElement('td');
var text1 = document.createTextNode('Text1');
var text2 = document.createTextNode('Text2');
td1.appendChild(text1);
td2.appendChild(text2);
tr.appendChild(td1);
tr.appendChild(td2);
table.appendChild(tr);
}
document.body.appendChild(table);
How can I add a class name or an id to its cells?
For example I want to be able to modify cells after their creation, so I want just :
table.getElementsByClassName("class").style.font-weight: "bold";
Use HTML DOM setAttribute() Method to add attributes to an element, like following :
var td1 = document.createElement('td');
var td2 = document.createElement('td');
td1.setAttribute('class', 'className');
td2.setAttribute('class', 'className');
Hope this helps.
Do:
table.setAttribute("id", "myId");
Read up: MDN Element.setAttribute()
Use the same function to set class, just like #Zakaria mentioned.