We Keep Coding

how to sum table columns contains input fields using javascript

I am creating a billing web application in laravel
I created a form and a button (on click button call addtoinvoice() ) function, then it will add rows in table and created input fields .
so i want to get sum of all product_values[] columns
<script type="text/javascript">
function addtoinvoice()
{
var products = document.getElementById("product");
var productsvalue = products.options[products.selectedIndex].value;
var client = document.getElementById("client");
var clientvalue = client.options[client.selectedIndex].value;
//----verify product or client input is not nulll------------
if(productsvalue == "")
{
alert("Please select an product");
}else if(clientvalue==""){
alert("Please select an client");
}else
{
var index,table = document.getElementById("products");
//-----------Insert Rows 1 ---------------
var row = table.insertRow(1);
//----------------insert Columns-----------------
var product_name = row.insertCell(0);
var product_input_tag = document.createElement("input");
product_input_tag.type = "text";
product_input_tag.name="product_name[]";
product_input_tag.readOnly=true;
var product_name_value = document.getElementById("product");
product_input_tag.value = product_name_value.options[product_name_value.selectedIndex].text;
product_name.appendChild(product_input_tag);
var product_description = row.insertCell(1);
var product_description_input_tag = document.createElement("input");
product_description_input_tag.type = "text";
product_description_input_tag.name="product_desciption[]";
product_description_input_tag.readOnly=true;
var product_description_value = document.getElementById("pro_description");
product_description_input_tag.value = product_description_value.value;
product_description.appendChild(product_description_input_tag);
var product_uom = row.insertCell(2);
var product_uom_input_tag = document.createElement("input");
product_uom_input_tag.type = "text";
product_uom_input_tag.name="product_uom[]";
product_uom_input_tag.readOnly=true;
var product_uom_value = document.getElementById("uom");
product_uom_input_tag.value = product_uom_value.value;
product_uom.appendChild(product_uom_input_tag);
var product_qty = row.insertCell(3);
var product_qty_input_tag = document.createElement("input");
product_qty_input_tag.type = "number";
product_qty_input_tag.name="product_qty[]";
product_qty_input_tag.readOnly=true;
var product_qty_value = document.getElementById("qty");
product_qty_input_tag.value = product_qty_value.value;
product_qty.appendChild(product_qty_input_tag);
var product_unitprice = row.insertCell(4);
var product_unitprice_input_tag = document.createElement("input");
product_unitprice_input_tag.type = "number";
product_unitprice_input_tag.name="product_uniprice[]";
product_unitprice_input_tag.readOnly=true;
var product_unitprice_value = document.getElementById("unit_price");
product_unitprice_input_tag.value = product_unitprice_value.value;
product_unitprice.appendChild(product_unitprice_input_tag);
var product_discount = row.insertCell(5);
var product_discount_input_tag = document.createElement("input");
product_discount_input_tag.type = "number";
product_discount_input_tag.name="product_discount[]";
product_discount_input_tag.readOnly=true;
var product_discount_value = document.getElementById("discount");
product_discount_input_tag.value = product_discount_value.value;
var discount = product_discount_value.value;
product_discount.appendChild(product_discount_input_tag);
var product_value = row.insertCell(6);
var product_value_input_tag = document.createElement("input");
product_value_input_tag.type = "number";
product_value_input_tag.name="product_value[]";
product_value_input_tag.readOnly=true;
var original = (product_unitprice_value.value)*(product_qty_value.value);
var newdiscount = (original/100)*discount;
var total_discount = original-newdiscount;
var result = Math.round(total_discount*100)/100;
product_value_input_tag.value = result;
product_value.appendChild(product_value_input_tag);
var product_cgst = row.insertCell(7);
var product_cgst_input_tag = document.createElement("input");
product_cgst_input_tag.type = "number";
product_cgst_input_tag.name="product_cgst[]";
product_cgst_input_tag.readOnly=true;
product_cgst_input_tag.value = 0;
product_cgst.appendChild(product_cgst_input_tag);
var product_sgst = row.insertCell(8);
var product_sgst_input_tag = document.createElement("input");
product_sgst_input_tag.type = "number";
product_sgst_input_tag.name="product_cgst[]";
product_sgst_input_tag.readOnly=true;
product_sgst_input_tag.value = 0;
product_sgst.appendChild(product_sgst_input_tag);
var product_igst = row.insertCell(9);
var product_igst_tag = document.createElement("input");
product_igst_tag.type = "text";
product_igst_tag.name="product_igst[]";
product_igst_tag.readOnly=true;
var product_igst_value = document.getElementById("tax");
var igst = product_igst_value.options[product_igst_value.selectedIndex].value;
var tax = (total_discount/100)*igst;
product_igst_tag.value = Math.round(tax*100)/100;
product_igst.appendChild(product_igst_tag);
var remove_row = row.insertCell(10);
var product_remove = document.createElement("span");
product_remove.className="btn btn-danger";
var button_name = document.createTextNode("Remove");
product_remove.appendChild(button_name);
remove_row.appendChild(product_remove);
//------------Cells Insert End----------------
//--------Remove Rows start----------
for(var i = 1; i<table.rows.length; i++)
{
table.rows[i].cells[10].onclick = function()
{
var c = confirm("do you want to remove this product ?");
if(c == true)
{
index = this.parentElement.rowIndex;
table.deleteRow(index);
}
}
}
//-------Remove Rows End-------------
//----------Calculate All sums subtotal,discount,tax etc..------------
}
}
</script>

How to get associative array elements and names. JS

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;
}

Removing items from table

I'm solving this problem, I want to add and remove items to the HTML table using javascript. So far I've got this, but I don't really know how to make the removing part possible. Could you give me a hand please?
let inputJmeno = document.querySelector('#inputJmeno');
let inputPrijmeni = document.querySelector('#inputPrijmeni');
let inputVek = document.querySelector('#inputVek');
let buttonAdd = document.querySelector('#add');
let table = document.querySelector('table');
let tbody = document.querySelector('tbody');
let tr = document.querySelector('tr');
let jmeno = null;
let prijmeni = null;
let vek = null;
let pocetOsob = 0;
buttonAdd.addEventListener('click', add);
function add() {
jmeno = inputJmeno.value;
prijmeni = inputPrijmeni.value;
vek = inputVek.value;
let newRow = document.createElement('tr');
let newJmeno = document.createElement('td');
let newPrijmeni = document.createElement('td');
let newVek = document.createElement('td');
let krizek = document.createElement('span');
krizek.id = "krizek" + pocetOsob;
krizek.className = "krizClass";
newRow.id = "row" + pocetOsob;
newJmeno.innerHTML = jmeno;
newPrijmeni.innerHTML = prijmeni;
newVek.innerHTML = vek;
krizek.innerHTML = 'x';
tbody.appendChild(newRow);
newRow.appendChild(newJmeno);
newRow.appendChild(newPrijmeni);
newRow.appendChild(newVek);
newRow.appendChild(krizek);
load(pocetOsob);
pocetOsob++;
}
function load(p) {
let krz = document.querySelector('#krizek'+p);
console.log(p);
}

try
newRow.removeChild(krizek);

How to add updated object information back into a specific index in an array of objects? (Javascript)

I have a practice app that is supposed to accept new information and put the information into an array of objects. It also has the option to edit specific data in the array. Everything works perfectly until I try and re-insert the new information back to where the old information was stored inside the array. The problem is occurring in the editObj function. I removed all the bad code I knew existed and left what I know works.
//HTML elements
var table = document.querySelector('#list');
var main = document.querySelector('#main');
var form = document.querySelector('#form');
var userInput = document.querySelector('#userInput');
var addBtn = document.querySelector('#add');
var saveBtn = document.querySelector('#save');
//Object array
var Assignments = [ ];
//main function
var mainView = function() {
table.innerHTML = '';
for(i = 0; i < Assignments.length; i++){
//elements
var row = document.createElement('tr');
var data = document.createElement('td');
var data2 = document.createElement('td');
var data3 = document.createElement('td');
var edit = document.createElement('td');
var remove = document.createElement('td');
var editBtn = document.createElement('button');
var deleteBtn = document.createElement('button');
//rendering
data.innerHTML = Assignments[i].name;
data2.innerHTML = Assignments[i].possible;
data3.innerHTML = Assignments[i].earned;
//innerText
editBtn.innerText = "Edit";
deleteBtn.innerText = "Delete";
//set attributes
editBtn.setAttribute('index',i);
deleteBtn.setAttribute('index',i);
//appending
edit.appendChild(editBtn);
remove.appendChild(deleteBtn);
row.appendChild(data);
row.appendChild(data2);
row.appendChild(data3);
row.appendChild(edit);
row.appendChild(remove);
table.appendChild(row);
//event listeners
editBtn.addEventListener('click', editObj);
deleteBtn.addEventListener('click', deleteObj);
//unhide table
main.style.display = '';
}
};
//add form
var addObj = function() {
main.style.display = 'none';
form.style.display = '';
};
var saveObj = function(e) {
e.preventDefault();
var itmObj = {};
var name = 'name';
var pP = 'possible';
var pE = 'earned';
itmObj[name] = userInput.name.value;
itmObj[pP] = userInput.pP.value;
itmObj[pE] = userInput.pE.value;
Assignments.push(itmObj);
console.log(Assignments);
form.style.display = 'none';
mainView();
};
//editing functions
var editObj = function(e) {
main.style.display = 'none';
form.style.display = '';
saveBtn.style.display = 'none';
newSaveBtn.style.display = '';
//get object
var editing = e.currentTarget.getAttribute('index');
userInput.name.value = Assignments[editing].name;
userInput.pP.value = Assignments[editing].possible;
userInput.pE.value = Assignments[editing].earned;
//remove original from array
Assignments.splice(editing, 1);
//add new data to array
};
//delete
var deleteObj = function(e) {
var removing = e.currentTarget.getAttribute('index');
Assignments.splice(removing, 1);
mainView();
};
//event listeners
addBtn.addEventListener('click', addObj);
userInput.addEventListener('submit', saveObj);
Assuming nothing is wrong with the current code... How do I get the new updated information back to the previous indexed value?
This was one of the ways that I tried and the eventListener will not fire on the new button:
var editObj = function(e) {
main.style.display = 'none';
form.style.display = '';
saveBtn.style.display = 'none';
//get object
var editing = e.currentTarget.getAttribute('index');
userInput.name.value = Assignments[editing].name;
userInput.pP.value = Assignments[editing].possible;
userInput.pE.value = Assignments[editing].earned;
//remove original from array
Assignments.splice(editing, 1);
//add new data to array
var editBtn = document.createElement('button');
editBtn.innerText = 'Save New';
form.appendChild(editBtn);
editBtn.addEventListener('click', editTest);
//test editing
var editTest = function(e){
console.log(editing);
var newObj = {};
var newName = 'name';
var newpP = 'possible';
var newpE = 'earned';
newObj[newName] = userInput.name.value;
newObj[newpP] = userInput.pP.value;
newObj[newpE] = userInput.pE.value;
Assignments.splice(editing, 0, newObj);
form.style.display = 'none';
form.removeChild(editBtn);
saveBtn.style.display = '';
mainView();
};
};

Ah! Fixed it. Turns out the editObj and editTest functions needed to be combined. Here is the working code:
var editObj = function(e) {
main.style.display = 'none';
form.style.display = '';
saveBtn.style.display = 'none';
//get object
var editing = e.currentTarget.getAttribute('index');
userInput.name.value = Assignments[editing].name;
userInput.pP.value = Assignments[editing].possible;
userInput.pE.value = Assignments[editing].earned;
//remove original from array
Assignments.splice(editing, 1);
//add new data to array
var editBtn = document.createElement('button');
editBtn.innerText = 'Save New';
form.appendChild(editBtn);
editBtn.addEventListener('click', function(e){
console.log(editing);
var newObj = {};
var newName = 'name';
var newpP = 'possible';
var newpE = 'earned';
newObj[newName] = userInput.name.value;
newObj[newpP] = userInput.pP.value;
newObj[newpE] = userInput.pE.value;
Assignments.splice(editing, 0, newObj);
form.style.display = 'none';
form.removeChild(editBtn);
saveBtn.style.display = '';
mainView();
});

HTML table is rendered in one line

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/