We Keep Coding

Populate view with different values in js

I am writing a website and need to work with a big data mass. I sort this with special algorithmics and now I want to populate one whole table, but put in different values.
I already have this HTML piece:
<div class='main_has_permission' id="main_has_permission">
<div class='main_padding' id="main_padding">
<div class="noten_tabelle_permission" id="noten_tabelle_permission">
<h1 id="member_name"></h1>
<table id="grades_table" style="width:100%">
<tr>
<th>Fach</th>
<th>mündlich</th>
<th>Klausur</th>
</tr>
</table>
</div>
</div>
</div>
The main_padding div is the div in which the whole table should be populated.
With the following code, I get the data and call a function to add the values to the table:
db.collection("users")
.doc(el)
.collection("grades")
.get()
.then(function(querySnapshot) {
querySnapshot.forEach(function(doc) {
const data = doc.data();
addToTable("grade_table" + table_number, doc.id, data.mdl, data.klu);
});
});
Finally here is the function who adds the values to the table:
function addToTable(table_name, subject, mdl, klu) {
var subject_name = getSubjectByNumber(subject);
var short_subject = getSubjectShortByNumber(subject);
//Zeile erstellen
var y = document.createElement([short_subject]);
y.setAttribute("id", [short_subject]);
document.getElementById([table_name]).appendChild(y);
//Spalten in einer Zeile
var y = document.createElement("TR");
y.setAttribute("id", [short_subject]);
//Spalten in einer Zeile
var cE = document.createElement("TD");
var tE = document.createTextNode([subject_name]);
cE.appendChild(tE);
y.appendChild(cE);
var a = document.createElement("TD");
var b = document.createTextNode([mdl]);
a.appendChild(b);
y.appendChild(a);
var c = document.createElement("TD");
var d = document.createTextNode([klu]);
c.appendChild(d);
y.appendChild(c);
document.getElementById("grades_table").appendChild(y);
}
Now...How to populate the table by putting in different values?
Thanks in advance.

update value in cart

I am developing shopping cart application in MVC 4 where I need to update the amount on changing the cart quantity.
#foreach (var item in Model)
{
<tr>
<td>#item.ProductId</td>
<td>#item.Product.ProductName</td>
<td id="PriceBx">#item.Product.UnitPrice</td>
<td id="QtyBx" oninput="calculate()">#Html.TextBox("QuantityBox", item.Quantity, new { style = "width:50px" })</td>
<td id="result">#String.Format("{0:c}", Convert.ToDouble(item.Quantity) * Convert.ToDouble(item.Product.UnitPrice))</td>
</tr>
}
In this I need to update the total when the value in QuantityBox is changed.
I tried using Javascript
<script type="text/javascript">
function calculate()
{
var myBox1 = document.getElementById('QtyBx').value;
var myBox2 = document.getElementById('PriceBx').value;
var result = document.getElementById('result');
var myResult = myBox1 * myBox2;
result.innerHTML = myResult;
}

Generating multiple elements using a foreach then using id attribute for elements inside it is never a good idea because element id has to be unique per HTML page.
Try to append the product-id to the element id:
#foreach (var item in Model)
{
<tr>
<td>#item.ProductId</td>
<td>#item.Product.ProductName</td>
<td id="PriceBx#(item.ProductId)">#item.Product.UnitPrice</td>
<td id="QtyBx#(item.ProductId)" oninput="calculate(#(item.ProductId))">#Html.TextBox("QuantityBox", item.Quantity, new { style = "width:50px" })</td>
<td id="result#(item.ProductId)">#String.Format("{0:c}", Convert.ToDouble(item.Quantity) * Convert.ToDouble(item.Product.UnitPrice))</td>
</tr>
}
And in your Javascript:
function calculate(itemId)
{
var myBox1 = parseInt(document.getElementById('QtyBx' + itemId).value, 10);
var myBox2 = parseFloat(document.getElementById('PriceBx' + itemId).value);
var result = document.getElementById('result' + itemId);
var myResult = myBox1 * myBox2;
result.innerHTML = myResult;
}
(I took the liberty to explicitly convert the values of your inputs to int and float respectively)

first of all, some remarks:
you're using an id in your HTML and you're repeating it through your Model, this breaks the rule that one page should have unique id's
You're not using any javascript framework, though pure javascript is a way to accomplish what you need, but in the future you might have some cross-broser issues when performing more advance tasks
you have an onInput in your td, but it should be in the checkbox it self
you can easily use your own textbox markup:
<td id="QtyBx" oninput="calculate()">
#Html.TextBox("QuantityBox", item.Quantity, new { style = "width:50px" })
</td>
<td id="result">
...
</td>
change to:
<td class="quantity">
<input type="number" id="QuantityBox_#item.Product.ProductId"
value="#item.Quantity"
data-unitprice="#item.Product.UnitPrice"
data-productid="#item.Product.ProductId"
onchange="calculate(this)" />
</td>
...
and, using jQuery (to handle the data- easier) should be something like:
function calculate(elm) {
var chk = $(elm), // the checkbox
vlu = chk.val(), // the current qty value
pid = chk.data("productid"), // product id
unt = chk.data("unitprice"), // unit price
res = $(".result_" + pid), // the result for this product
tot = vlu * unt; // total
res.text("$" + tot); // write the value
}
a live example: https://jsbin.com/gafaja/edit?html,js,output
if you still wanna learn/do it in plain javascript:
function calculate(elm) {
var vlu = elm.value, // the current qty value
pid = elm.getAttribute("data-productid"), // product id
unt = elm.getAttribute("data-unitprice"), // unit price
res = document.getElementsByClassName("result_" + pid), // the result for this product
tot = vlu * unt; // total
res[0].innerHTML = "$" + tot; // write the value
}
one more thing...
don't add style to the elements, just add a stylesheet as:
<style>
.quantity input { width:50px; }
</style>

Get Value of HTML cells in row clicked with Javascript

I am populating a html table based on data stored in parse.com. So the table is dynamically populated, I am including editing options for the user to add, delete and edit a row. I have managed to incorporate delete and add to the table however, my problem is I need to get the data in the cells of the row on which I click the edit button...
So what I want to do is when the user clicks on the edit button I'll open a dialog with the table row in it populated with the data in the row they have clicked, in this dialog they can change data and save. I've attached a screenshot of a sample table. So if the user clicks on the edit button on the second row, I need to obtain the data in each cell to populate the dialog.
Here is what I have tried:
var par = $(this).parent().parent(); //table row
var tdUuid = par.children("td:nth-child(1)");
var tdProx = par.children("td:nth-child(2)");
var tdOffer = par.children("td:nth-child(3)");
alert(tdUuid.html()); //for testing
This comes up as undefined.
I've also tried:
var value = $(this).children().get(1).text();
I've tried to display this in an alert but the alert doesn't display so I'm assuming this is way wrong...
If anyone could help me I'd greatly appreciate it. I'm VERY new to html/javascript and I'm feeling my way around in the dark!
EDIT
Here is my html as requested:
<div id="EditDialog" title="Edit iBeacon">
<p class ="editInfo">
Please edit fields and click save
</p>
<table id ="editingTable" class ="beaconTable ">
<thead>
<tr>
<th>UUID</th>
<th>Proximity</th>
<th>Offer</th>
</tr>
</thead>
<tbody></tbody>
</table>
<button id ="saveButton" class ="btnSave">Save</button> <button id ="cancelButton" class ="btnCan">Cancel</button>
</div>
<div id= "tableContainerHolder">
<div id = "tableContainer">
<button id ="buttonAdd">Add iBeacon</button>
<table id ="iBeaconTable" class ="beaconTable " >
<thead>
<tr>
<th>UUID</th>
<th>Proximity</th>
<th>Offer</th>
<th>Editing Options</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<script>
$(function() {
$("#EditDialog").dialog({
autoOpen: false
});
});
</script>
FURTHER EDIT
Here is how I populate my table:
$('#iBeaconTable').append('<tr><td id = "uuid">' + object.get('uuid') + '</td><td = "proxId">' + object.get('proximity') + '</td><td = "offerId">' + object.get('offer_content') + '</td><td><Button id = "btnEdit" onclick = "openDialog()">Edit</Button><Button id = "btnDelete" onclick = "Delete()">Delete</Button></td></tr>');
So I add the buttons each time in each row.
additional edit
Apologies for omitting code
function openDialog() {
var par = $(this).parent().parent(); //table row
var tdUuid = par.children("td:nth-child(1)");
var tdProx = par.children("td:nth-child(2)");
var tdOffer = par.children("td:nth-child(3)");
$("#EditDialog").dialog("open");
$('#editingTable').append('<tr><td id = "uuid">' +tdUuid.innerHTML+ '</td><td = "proxId">' + tdProx.html()+ '</td><td = "offerId">' + tdOffer.html());
}
The code in the openDialog() is what I had originally posted.

values in table are selected only after adding data dynamically. To get td values
var tr = $(this).closest('tr')
var tdUuid = $(tr).find('td').eq(0).text();
var tdProx = $(tr).find('td').eq(1).text();
var tdOffer = $(tr).find('td').eq(2).text();
Hope this should work.

Creating a Shopping Cart using only HTML/JavaScript

I'm not sure what to do in order to complete this project. I need to create a shopping cart that uses only one HTML page. I have the table set up showing what is being sold but where I am lost is the JavaScript.
I don't know how to link the "Add to Cart" button with all the necessary data( The name, description, and price) to be able to add it to the cart. I don't need to be able to remove it from the cart, but it does need to show the total. After searching online for a few answers, I've tried some things but just cannot figure it out.
Any help is definitely appreciated because I am completely lost at this point and am new to JavaScript in general.
This is the jsFiddle but that was a little confusing to me, because it's working differently on there than if I just went to Run in Notepad++
jsFiddle: http://jsfiddle.net/renavi/ATjvt/5/
function AddtoCart() {
console.log('hi');
var x = document.getElementById('Items');
var new_row = x.rows[1].cloneNode(true);
var len = x.rows.length;
new_row.cells[0].innerHTML = len;
var inp1 = new_row.cells[1].getElementsByTagName('input')[0];
inp1.id += len;
inp1.value = '';
var inp2 = new_row.cells[2].getElementsByTagName('input')[0];
inp2.id += len;
inp2.value = '';
x.appendChild(new_row);
}
The direct file is here
Pastebin: http://pastebin.com/sutGWjSY

You simply need to use simpleCart
It is a free and open-source javascript shopping cart that easily integrates with your current website.
You will get the full source code at github

For a project this size, you should stop writing pure JavaScript and turn to some of the libraries available. I'd recommend jQuery (http://jquery.com/), which allows you to select elements by css-selectors, which I recon should speed up your development quite a bit.
Example of your code then becomes;
function AddtoCart() {
var len = $("#Items tr").length, $row, $inp1, $inp2, $cells;
$row = $("#Items td:first").clone(true);
$cells = $row.find("td");
$cells.get(0).html( len );
$inp1 = $cells.get(1).find("input:first");
$inp1.attr("id", $inp1.attr("id") + len).val("");
$inp2 = $cells.get(2).find("input:first");
$inp2.attr("id", $inp2.attr("id") + len).val("");
$("#Items").append($row);
}
I can see that you might not understand that code yet, but take a look at jQuery, it's easy to learn and will make this development way faster.
I would use the libraries already created specifically for js shopping carts if I were you though.
To your problem; If i look at your jsFiddle, it doesn't even seem like you have defined a table with the id Items? Maybe that's why it doesn't work?

I think it is a better idea to start working with a raw data and then translate it to DOM (document object model)
I would suggest you to work with array of objects and then output it to the DOM in order to accomplish your task.
You can see working example of following code at http://www.softxml.com/stackoverflow/shoppingCart.htm
You can try following approach:
//create array that will hold all ordered products
var shoppingCart = [];
//this function manipulates DOM and displays content of our shopping cart
function displayShoppingCart(){
var orderedProductsTblBody=document.getElementById("orderedProductsTblBody");
//ensure we delete all previously added rows from ordered products table
while(orderedProductsTblBody.rows.length>0) {
orderedProductsTblBody.deleteRow(0);
}
//variable to hold total price of shopping cart
var cart_total_price=0;
//iterate over array of objects
for(var product in shoppingCart){
//add new row
var row=orderedProductsTblBody.insertRow();
//create three cells for product properties
var cellName = row.insertCell(0);
var cellDescription = row.insertCell(1);
var cellPrice = row.insertCell(2);
cellPrice.align="right";
//fill cells with values from current product object of our array
cellName.innerHTML = shoppingCart[product].Name;
cellDescription.innerHTML = shoppingCart[product].Description;
cellPrice.innerHTML = shoppingCart[product].Price;
cart_total_price+=shoppingCart[product].Price;
}
//fill total cost of our shopping cart
document.getElementById("cart_total").innerHTML=cart_total_price;
}
function AddtoCart(name,description,price){
//Below we create JavaScript Object that will hold three properties you have mentioned: Name,Description and Price
var singleProduct = {};
//Fill the product object with data
singleProduct.Name=name;
singleProduct.Description=description;
singleProduct.Price=price;
//Add newly created product to our shopping cart
shoppingCart.push(singleProduct);
//call display function to show on screen
displayShoppingCart();
}
//Add some products to our shopping cart via code or you can create a button with onclick event
//AddtoCart("Table","Big red table",50);
//AddtoCart("Door","Big yellow door",150);
//AddtoCart("Car","Ferrari S23",150000);
<table cellpadding="4" cellspacing="4" border="1">
<tr>
<td valign="top">
<table cellpadding="4" cellspacing="4" border="0">
<thead>
<tr>
<td colspan="2">
Products for sale
</td>
</tr>
</thead>
<tbody>
<tr>
<td>
Table
</td>
<td>
<input type="button" value="Add to cart" onclick="AddtoCart('Table','Big red table',50)"/>
</td>
</tr>
<tr>
<td>
Door
</td>
<td>
<input type="button" value="Add to cart" onclick="AddtoCart('Door','Yellow Door',150)"/>
</td>
</tr>
<tr>
<td>
Car
</td>
<td>
<input type="button" value="Add to cart" onclick="AddtoCart('Ferrari','Ferrari S234',150000)"/>
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top">
<table cellpadding="4" cellspacing="4" border="1" id="orderedProductsTbl">
<thead>
<tr>
<td>
Name
</td>
<td>
Description
</td>
<td>
Price
</td>
</tr>
</thead>
<tbody id="orderedProductsTblBody">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right" id="cart_total">
</td>
</tr>
</tfoot>
</table>
</td>
</tr>
</table>
Please have a look at following free client-side shopping cart:
SoftEcart(js) is a Responsive, Handlebars & JSON based, E-Commerce shopping cart written in JavaScript with built-in PayPal integration.
Documentation
http://www.softxml.com/softecartjs-demo/documentation/SoftecartJS_free.html
Hope you will find it useful.

Here's a one page cart written in Javascript with localStorage. Here's a full working pen. Previously found on Codebox
cart.js
var cart = {
// (A) PROPERTIES
hPdt : null, // HTML products list
hItems : null, // HTML current cart
items : {}, // Current items in cart
// (B) LOCALSTORAGE CART
// (B1) SAVE CURRENT CART INTO LOCALSTORAGE
save : function () {
localStorage.setItem("cart", JSON.stringify(cart.items));
},
// (B2) LOAD CART FROM LOCALSTORAGE
load : function () {
cart.items = localStorage.getItem("cart");
if (cart.items == null) { cart.items = {}; }
else { cart.items = JSON.parse(cart.items); }
},
// (B3) EMPTY ENTIRE CART
nuke : function () {
if (confirm("Empty cart?")) {
cart.items = {};
localStorage.removeItem("cart");
cart.list();
}
},
// (C) INITIALIZE
init : function () {
// (C1) GET HTML ELEMENTS
cart.hPdt = document.getElementById("cart-products");
cart.hItems = document.getElementById("cart-items");
// (C2) DRAW PRODUCTS LIST
cart.hPdt.innerHTML = "";
let p, item, part;
for (let id in products) {
// WRAPPER
p = products[id];
item = document.createElement("div");
item.className = "p-item";
cart.hPdt.appendChild(item);
// PRODUCT IMAGE
part = document.createElement("img");
part.src = "images/" +p.img;
part.className = "p-img";
item.appendChild(part);
// PRODUCT NAME
part = document.createElement("div");
part.innerHTML = p.name;
part.className = "p-name";
item.appendChild(part);
// PRODUCT DESCRIPTION
part = document.createElement("div");
part.innerHTML = p.desc;
part.className = "p-desc";
item.appendChild(part);
// PRODUCT PRICE
part = document.createElement("div");
part.innerHTML = "$" + p.price;
part.className = "p-price";
item.appendChild(part);
// ADD TO CART
part = document.createElement("input");
part.type = "button";
part.value = "Add to Cart";
part.className = "cart p-add";
part.onclick = cart.add;
part.dataset.id = id;
item.appendChild(part);
}
// (C3) LOAD CART FROM PREVIOUS SESSION
cart.load();
// (C4) LIST CURRENT CART ITEMS
cart.list();
},
// (D) LIST CURRENT CART ITEMS (IN HTML)
list : function () {
// (D1) RESET
cart.hItems.innerHTML = "";
let item, part, pdt;
let empty = true;
for (let key in cart.items) {
if(cart.items.hasOwnProperty(key)) { empty = false; break; }
}
// (D2) CART IS EMPTY
if (empty) {
item = document.createElement("div");
item.innerHTML = "Cart is empty";
cart.hItems.appendChild(item);
}
// (D3) CART IS NOT EMPTY - LIST ITEMS
else {
let p, total = 0, subtotal = 0;
for (let id in cart.items) {
// ITEM
p = products[id];
item = document.createElement("div");
item.className = "c-item";
cart.hItems.appendChild(item);
// NAME
part = document.createElement("div");
part.innerHTML = p.name;
part.className = "c-name";
item.appendChild(part);
// REMOVE
part = document.createElement("input");
part.type = "button";
part.value = "X";
part.dataset.id = id;
part.className = "c-del cart";
part.addEventListener("click", cart.remove);
item.appendChild(part);
// QUANTITY
part = document.createElement("input");
part.type = "number";
part.value = cart.items[id];
part.dataset.id = id;
part.className = "c-qty";
part.addEventListener("change", cart.change);
item.appendChild(part);
// SUBTOTAL
subtotal = cart.items[id] * p.price;
total += subtotal;
}
// EMPTY BUTTONS
item = document.createElement("input");
item.type = "button";
item.value = "Empty";
item.addEventListener("click", cart.nuke);
item.className = "c-empty cart";
cart.hItems.appendChild(item);
// CHECKOUT BUTTONS
item = document.createElement("input");
item.type = "button";
item.value = "Checkout - " + "$" + total;
item.addEventListener("click", cart.checkout);
item.className = "c-checkout cart";
cart.hItems.appendChild(item);
}
},
// (E) ADD ITEM INTO CART
add : function () {
if (cart.items[this.dataset.id] == undefined) {
cart.items[this.dataset.id] = 1;
} else {
cart.items[this.dataset.id]++;
}
cart.save();
cart.list();
},
// (F) CHANGE QUANTITY
change : function () {
if (this.value == 0) {
delete cart.items[this.dataset.id];
} else {
cart.items[this.dataset.id] = this.value;
}
cart.save();
cart.list();
},
// (G) REMOVE ITEM FROM CART
remove : function () {
delete cart.items[this.dataset.id];
cart.save();
cart.list();
},
// (H) CHECKOUT
checkout : function () {
// SEND DATA TO SERVER
// CHECKS
// SEND AN EMAIL
// RECORD TO DATABASE
// PAYMENT
// WHATEVER IS REQUIRED
alert("TO DO");
/*
var data = new FormData();
data.append('cart', JSON.stringify(cart.items));
data.append('products', JSON.stringify(products));
var xhr = new XMLHttpRequest();
xhr.open("POST", "SERVER-SCRIPT");
xhr.onload = function(){ ... };
xhr.send(data);
*/
}
};
window.addEventListener("DOMContentLoaded", cart.init);

removing items from an Array when clicking delete icon in html row

I have a bit of a problem. I'm trying to add,remove and edit items in an array of objects, showing its content in a html table,but without form submission. So far I've managed to add items ( thanks to David Calhoun ), but now I facing a new issue, since I don't know how to get the row index (when I click the delete image) ,so that I can delete that row. Is there any way to achieve this?
here's my code
<script>
var table = [];
function addDetail()
{
table.push({
price: document.getElementById('price').value,
description: document.getElementById('descripcion').value
});
showRow(table.length-1);
resetEntries();
}
function resetEntries()
{
document.getElementById('price').value='';
document.getElementById('descripcion').value='';
document.getElementById('price').focus();
}
function showRow(i)
{
if (table.length>0){
var tbl = document.getElementById('tabla_estilo');
var newRow = tbl.insertRow(tbl.rows.length);
var cell1 = newRow.insertCell(0);
cell1.textAlign='center';
cell1.innerHTML='<img src="images/edit.png" width="14" height="14" alt="Edit"/>'
var cell2 = newRow.insertCell(1);
cell2.textAlign='center';
cell2.innerHTML='<img src="images/delete.png" width="14" height="14" alt="Delete"/>'
var cell3 = newRow.insertCell(2);
cell3.textAlign='center';
cell3.innerHTML=table[i].price;
var cell4 = newRow.insertCell(3);
cell4.textAlign='center';
cell4.innerHTML=table[i].description;
}
}
And here's how my form looks

From the onclick handler for the delete button, you can traverse up to its <tr> and then get that row's rowIndex property.
So in the onclick:
var node = this.parentNode;
while( node && node.tagName !== 'TR' ) {
node = node.parentNode;
}
var index = node.rowIndex;
So when you're setting up your row cells, you can add a handler:
var cell2 = newRow.insertCell(1);
cell2.textAlign='center';
cell2.innerHTML='<img src="images/delete.png" width="14" height="14" alt="Delete"/>'
cell2.firstChild.onclick = function() {
var node = this.parentNode;
while( node && node.tagName !== 'TR' ) {
node = node.parentNode;
}
var index = node.rowIndex;
alert('index');
return false;
}
This creates a new function for each row. It would be better to reference a named function instead.

with JQuery use any of these selector
$('table tr').each(function(i, v) { alert((i+1) + ' row') });
$('table tr:nth-child(i)').hide();
OR
<a href="#" class="delete" onclick="$(this).parent().parent().hide()">

When you create a new row in the table use a custom attribute in to store the index of the element in the array:
<tr position='0'><td></td><td></t></tr>
<tr position='1'><td></td><td></t></tr>
<tr position='2'><td></td><td></t></tr>
<tr position='3'><td></td><td></t></tr>
Alternatively, if your rows are always in the same order as the elements in the array you may check how many previous siblings there are before this row.
I would use the first approach as it will still work if you reorder the rows in the table.
Make sure that if you delete the row you then recalculate row position attributes.