Hello I'm fairly new here so please correct me if I make any formatting or question errors!
I am attempting to create a simple shopping basket file and need some help getting the quantity of items within the basket to change. At the moment I can create a button that adds a new row to a table and fills it, I am just having a shortfall at getting the function to check if the item is already in the table and only update the quantity cell if it is. I am useless with IF statements, so any help would be more than appreciated!
<!DOCTYPE html>
<html>
<head>
<script>
function additem1() {
var table = document.getElementById("basket");
var row1 = table.insertRow(1);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var cell3 = row1.insertCell(2);
var cell4 = row1.insertCell(3);
var cell5 = row1.insertCell(4);
var cell6 = row1.insertCell(5);
cell1.innerHTML = "Shorts (f)";
cell2.innerHTML = "Stone Wash";
cell3.innerHTML = "1";
cell4.innerHTML = "";
cell5.innerHTML = "";
cell6.innerHTML = "";
;
}
</script>
<style>
table, td {
border: 1px solid black;
}
</style>
</head>
<body>
<h2> List of Items </h2>
<table border="1">
<tr bgcolor="#9acd32">
<th> Product </th>
<th> Description </th>
<th> Quantity </th>
<th> Price </th>
<tr>
<td> Shorts (F) </td>
<td> Stone wash Denim shorts </td>
<td> 20 </td>
<td> 25.90 </td>
<td> <button onclick= "additem1()"> Add Item To Basket </button> </td>
</table>
<table id="basket" border = "1">
<tr bgcolor="#9acd32">
<th> Product </th>
<th> Description </th>
<th> Quantity </th>
<th> Price </th>
<th colspan="2"> Add / Remove items </th>
</tr>
</table>
as you can see the first table holds the item information, and the second table holds the basket information.
Please consider to go deep on js coding; you can consider to check if the element already exist, then if so increment the quantity.
I made your code a little more generic, but for a working basket there is more to do, that's your job.
Code:
function additem1(e) {
var oRow = e.parentNode.parentNode
var prod = oRow.cells[0].innerHTML;
var des = oRow.cells[1].innerHTML;
var table = document.getElementById("basket");
var row1 = GetCellValues(prod);
if (typeof row1 === 'undefined') {
row1 = table.insertRow(1);
var cell1 = row1.insertCell(0);
var cell2 = row1.insertCell(1);
var cell3 = row1.insertCell(2);
var cell4 = row1.insertCell(3);
var cell5 = row1.insertCell(4);
var cell6 = row1.insertCell(5);
cell1.innerHTML = prod;
cell2.innerHTML = des;
cell3.innerHTML = "1";
cell4.innerHTML = "";
cell5.innerHTML = "";
cell6.innerHTML = "";;
} else {
row1.cells[2].innerHTML = parseInt(row1.cells[2].innerHTML) + 1
}
}
function GetCellValues(prod) {
var table = document.getElementById('basket');
for (var r = 0, n = table.rows.length; r < n; r++) {
for (var c = 0, m = table.rows[r].cells.length; c < m; c++) {
if (table.rows[r].cells[c].innerHTML == prod) return table.rows[r];
}
}
return
}
Demo: http://jsfiddle.net/85o9yz02/
Related
I am obviously very new to JS. I need to solve a problem where i can't change the HTML and CSS-file. From the HTML-file I am supposed to:
add a column with the header "Sum". (Already did that)
add a row att the bottom with the div id "sumrow". (Did that as well)
add a button at the end. (Did that)
add the total from columns "Price and Amount" into column "Sum" when button is clicked
(This where I am lost)
And like I said I can't change anything in HTML and CSS-files.
// Create a newelement and store it in a variable
var newEl = document.createElement('th');
//Create a text node and store it in a variable
var newText = document.createTextNode('Summa');
//Attach the newtext node to the newelement
newEl.appendChild(newText);
//Find the position where the new element should be added
var position = document.getElementsByTagName('tr')[0];
//Insert the newelement into its position
position.appendChild(newEl);
// Find a <table> element with id="myTable":
var table = document.getElementById("pricetable");
// Create an empty <tr> element and add it to the 1st position of the table:
var row = table.insertRow(-1);
// Insert new cells (<td> elements) at the 1st and 2nd position of the "new" <tr> element:
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
var cell6 = row.insertCell(5);
// Add some text to the new cells:
cell1.innerHTML = "";
cell2.innerHTML = "";
cell3.innerHTML = "";
cell4.innerHTML = sumVal;
cell5.innerHTML = "";
cell6.innerHTML = "";
//Puts divid sumrow
row.setAttribute("id", "sumrow");
var table = document.getElementById("pricetable"), sumVal = 0;
for(var i = 1; i < table.rows.length; i++)
{
sumVal = sumVal + parseInt(table.rows[i].cells[3].innerHTML);
}
//Creates button
var button = document.createElement("button");
button.innerHTML = "Beräkna pris";
// 2. Append somewhere
var body = document.getElementsByTagName("tbody")[0];
body.appendChild(button);
button.addEventListener("click", medelVarde, true);
button.addEventListener("click", raknaUtMedelvarde, true);
button.setAttribute("class", "btn-primary");
function medelVarde(celler){
var summa = 0;
for(var i = 3; i < celler.length -1; i++){ //Räknar igenom från cell nr 4
var nuvarandeVarde = celler[i].firstChild.nodeValue;
summa = summa + parseInt(nuvarandeVarde);
}
var medel = summa / 1;
return medel;
}
function raknaUtMedelvarde(){
var tabell = document.getElementById("pricetable");
var rader = tabell.getElementsByTagName("tr");
for(var i = 1; i < rader.length; i++){
var tabellceller = rader[i].getElementsByTagName("td"); //Pekar på de td-element som vi har hämtat
var medel = medelVarde(tabellceller);
var medeltext = document.createTextNode(medel);
var medelelement = tabellceller[tabellceller.length - 1];
var row2 = table.insertRow(-1);
medelelement.appendChild(medeltext.cloneNode(true));
.table {
background: white;
}
tr#sumrow {
background-color: #cce4ff;
}
tr#sumrow td:first-child::after{
content: "\a0";
}
<!DOCTYPE html>
<html lang="sv">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<title>Handling calculations and tables</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="style/style.css" />
</head>
<body>
<div class="container">
<div id="header" class="text-center px-3 py-3 pt-md-5 pb-md-4 mx-auto">
<h1 class="display-4">Home Electronics</h1>
<p class="lead">Excellent prices on our hone electronics</p>
</div>
<div id="content">
<table id="pricetable" class="table table-hover">
<thead class="thead-dark">
<tr>
<th>Articlenr</th>
<th>Producttype</th>
<th>Brand</th>
<th>Price</th>
<th>Amount</th>
</tr>
</thead>
<tbody>
<tr>
<td>23456789</td>
<td>Telephone</td>
<td>Apple</td>
<td>6500</td>
<td>
<input type="text" size="3" value="1" />
</td>
</tr>
<tr>
<td>22256289</td>
<td>Telephone</td>
<td>Samsung</td>
<td>6200</td>
<td>
<input type="text" size="3" value="1" />
</td>
</tr>
<tr>
<td>24444343</td>
<td>Telephone</td>
<td>Huawei</td>
<td>4200</td>
<td>
<input type="text" size="3" value="1" />
</td>
</tr>
<tr>
<td>19856639</td>
<td>Tablet</td>
<td>Apple</td>
<td>4000</td>
<td>
<input type="text" size="3" value="1" />
</td>
</tr>
<tr>
<td>39856639</td>
<td>Tablet</td>
<td>Samsung</td>
<td>2800</td>
<td>
<input type="text" size="3" value="1" />
</td>
</tr>
<tr>
<td>12349862</td>
<td>Tablet</td>
<td>Huawei</td>
<td>3500</td>
<td>
<input type="text" size="3" value="1" />
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- add this script as snippet in this question -->
<!-- <script src="scripts/calculate.js"></script> -->
</body>
</html>
Or code is available on https://jsfiddle.net/cmyr2fp6/
button.addEventListener("click", medelVarde, true);
button.addEventListener("click", raknaUtMedelvarde, true);
For the button click event listener, you don't have to add the medelVarde function.
Also, speaking of that function, I'm not really sure what's happening there. Are you trying to multiply the price and the amount? If so, you can just get the price cell's text and multiply it by the amount input's value (converting to Number the values before multiplying).
const [,,, priceCell, amountCell, sumCell] = row.querySelectorAll('td');
const price = Number(priceCell.innerText);
const amount = Number(amountCell.querySelector('input').value);
const sum = price * amount;
The [,,, priceCell, amountCell, sumCell] is just a short-hand for getting the cells you want from the row (destructuring assignment. querySelectorAll returns a NodeList wherein you can get the element by index.
function setUp() {
// Set up table.
const table = document.getElementById('pricetable');
const headerRow = table.querySelector('thead tr');
const sumHeader = headerRow.insertCell();
const tbody = table.querySelector('tbody');
const sumTotalRow = tbody.insertRow();
const sumTotalCell = sumTotalRow.insertCell();
sumHeader.innerText = 'Summa';
sumTotalCell.colSpan = '5';
sumTotalCell.innerText = 'Total';
tbody.querySelectorAll('tr').forEach(row => row.insertCell());
// Set up button.
const btn = document.createElement('button');
btn.innerText = 'Beräkna pris';
btn.addEventListener('click', () => {
let total = 0;
tbody.querySelectorAll('tr').forEach((row, i, arr) => {
if (i < arr.length - 1) {
const [,,, priceCell, amountCell, sumCell] = row.querySelectorAll('td');
const price = Number(priceCell.innerText);
const amount = Number(amountCell.querySelector('input').value);
const sum = price * amount;
sumCell.innerText = sum;
total += sum;
} else {
const totalCell = row.querySelector('td:last-child');
totalCell.innerText = total;
}
});
});
document.body.appendChild(btn);
}
setUp();
Hey ZioPaperone welcome to the JS World :-)
First of all I would recommend to wrap you logic into functions, eg
appendRow() {
//put append row logic here
}
Now let's move on to your question, appending a column is a bit more of a trick then appending a row. You might noticed already that the DOM-Structure is a bit more complex. So for a row you could you correctly has added a node to your tbody.
For a column we need to learn how to create a cell and how we add an entry to the thead. We will use the insertCell() method to insert cells, for thead cells that won't work, so we need to add the th with createElement() and append it with appendChild()
function appendColumn() {
// insertCell doesn't work for <th>-Nodes :-(
var tableHeadRef = document.getElementById('pricetable').tHead; // table reference
var newTh = document.createElement('th');
tableHeadRef.rows[0].appendChild(newTh); // inser new th in node in the first row of thead
newTh.innerHTML = 'thead title';
// open loop for each row in tbody and append cell at the end
var tableBodyRef = document.getElementById('pricetable').tBodies[0];
for (var i = 0; i < tableBodyRef.rows.length; i++) {
var newCell = tableBodyRef.rows[i].insertCell(-1);
newCell.innerHTML = 'cell text'
}
}
EDIT:
To sum up values in col u can use the same approach. I broke down the nodes for better understanding. You also might want to add a check if your table data contains a number with isNaN().
function sumColumn(tableId, columnIndex) {
var tableBodyRef = document.getElementById(tableId).tBodies[0];
var sum = 0; // Initialize sum counter with 0
for (var i = 0; i < tableBodyRef.rows.length; i++) {
var currentRow = tableBodyRef.rows[i]; //access current row
var currentCell = currentRow.cells[columnIndex]; // look for the right column
var currentData = currentCell.innerHTML; // grab cells content
var sum += parseFloat(currentData); // parse content and add to sum
}
return sum;
}
i've been looking a while if somebody had a similar question, and there are a few, but not with the solution i need. their increments work perfectly fine but when they have a some rows like this
id
1 hello
2 hello
3 hello
4 hello
but when they delete row 3, row 4 becomes 3. I want it just like php where 4 stays 4 and doesn't become 3 so the next time you would add a row it would look like
id
1 hello
2 hello
4 hello
5 hello
see the following code for yourself; I can't figure it out
<table id="myTable">
<thead>
<tr>
<th>id</th>
<th>titel</th>
<th>beschrijving</th>
<th>deadline</th>
<th>delete task</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="forms flex flex-around">
<form >
<h2>Add Tasks</h2>
titel: <input type="text" name="titel" id="send"><br />
beschrijving: <input type="text" id="send" name="beschrijving"><br />
deadline: <input type="date" id="send" name="deadline"><br />
<!-- <input type="submit" value="Add" name="type" class="center" onclick="myFunction()"> -->
<button type="button" value="Add" id="handler" class="center button-add" onclick="addRow(); ">add task</button>
</form>
</div>
$(document).ready(function() {
buildTable();
});
function buildTable() {
const retrievedTaskObject = localStorage.getItem("table");
const parsedObject = JSON.parse(retrievedTaskObject);
for (i = 0; i < parsedObject.length; i++) {
addRow(parsedObject[i])
}
}
function addRow(rowData = false) {
var table = document.getElementById("myTable").getElementsByTagName('tbody')[0];
var row = table.insertRow(table.rows.length);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
var cell5 = row.insertCell(4);
if (!rowData) {
cell2.innerHTML = '<td>' + document.querySelector('[name="titel"]').value; + '</td>';
cell3.innerHTML = document.querySelector('[name="beschrijving"]').value;
cell4.innerHTML = document.querySelector('[name="deadline"]').value;
} else {
cell2.innerHTML = '<td>' + rowData.title + '</td>';
cell3.innerHTML = rowData.description;
cell4.innerHTML = rowData.deadline;
}
cell5.innerHTML = '<button class="button-add last-row" type="button" onClick="deleteRow()" >' +
'delete</button>';
getAndSaveTableValues();
}
function getTblValues(tableName = false) {
if (!tableName) {
console.log('Please enter a tableName, function won\'t work without it');
return;
}
const dataArray = new Array();
$(`${tableName} tbody tr`).each(function(rowIndex, tr) {
dataArray[rowIndex] = {
"id": rowIndex,
"title": $(tr).find('td:eq(1)').text(),
"description": $(tr).find('td:eq(2)').text(),
"deadline": $(tr).find('td:eq(3)').text()
}
});
return dataArray;
}
function deleteRow() {
var td = event.target.parentNode;
var tr = td.parentNode;
tr.parentNode.removeChild(tr);
getAndSaveTableValues();
};
as you can see I have pretty much everything set, but because my messyness and few months of coding I completely lost track and don't know how to fix the increment I've tried many things but ended up breaking it fully,
Any help is welcome not only the solution but if you see something that could be smarter coded let me know
I do not fully know how to fix this problem, but have you tried to replace the value with null instaed of .removeChild(tr)?
I can't sum the subtotals of an HTML column table using javascript. I need to sum the 5th column and put the result in a textbox so the costumer can see the totals of his bill. The thing is, I can't use database because it is a table that doesn't INSERT the value in the database until I hit the final button. Any help would be appreciated. Thanks a lot
var arr2 = "";
$('#añadir').click(function() {
var table = document.getElementById("tablaC");
var id_pla = document.getElementById("plato_id").value;
var pla = document.getElementById("plato_nombre").value;
var cantidad = document.getElementById("cantidad").value;
var punitario = document.getElementById("plato_precio").value;
var subtotal = (cantidad * punitario)
if (id_pla != "" && cantidad != "") {
var row = table.insertRow(cant);
var cell0 = row.insertCell(0);
var cell1 = row.insertCell(1);
var cell2 = row.insertCell(2);
var cell3 = row.insertCell(3);
var cell4 = row.insertCell(4);
var cell5 = row.insertCell(5);
cell0.innerHTML = cant;
cell1.innerHTML = id_pla;
cell2.innerHTML = pla;
cell3.innerHTML = cantidad;
cell4.innerHTML = punitario;
cell5.innerHTML = subtotal;
cant++;
arr2 += id_pla + "," + cantidad + ","
$('#arr').val(arr2);
}
validar();
});
This is the HTML code
<table id="tablaC" class="table table-hover">
<thead>
<tr>
<th>ID Pedido</th>
<th>ID Plato</th>
<th>Plato</th>
<th>Cantidad</th>
<th>Precio Unitario</th>
<th>Subtotal</th>
</tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<input id="arr" name="arr" value="" />
<br>
<br/>
<input class="btn btn-info" type="submit" value="Crear Registro" id="registro">
</form>
<p></p>
I notice several issues in your files codes, you should fix them in order to make this work:
1)
To compare with "" You should use strict equality "!==" instead of "!="
if (id_pla !== "" && cantidad !== "") {
instead of:
if (id_pla != "" && cantidad != "") {
2) "$" is not defined as a variable, unless you refer to jQuery.
/*here*/ $('#añadir').click(function() {
3) Ids missing in your HTML code:
Here you are saying:
var table = document.getElementById("tablaC");
var id_pla = document.getElementById("plato_id").value;
var pla = document.getElementById("plato_nombre").value;
var cantidad = document.getElementById("cantidad").value;
var punitario = document.getElementById("plato_precio").value;
But you are not giving any id to this elements on your html. It should be like this:
<th>ID Pedido</th>
<th id="plato_id">ID Plato</th>
<th id="plato_nombre">Plato</th>
<th id="cantidad">Cantidad</th>
<th id="plato_precio">Precio Unitario</th>
<th>Subtotal</th>
This is my code which I was working on. Basically it is the Library Management Project for the final semester in my college.
Now my question is how to delete a row when we click that row's delete button.
<table border="1" id="student_tb1" class="table table-bordered" style="display: none;" contenteditable="true">
<tr>
<td>Sr. No.</td>
<td>Class</td>
<td>Roll no</td>
<td>Name</td>
</tr>
</table>
<script type="text/javascript">
function addStudent(){
var maxRows = 10;
var table = document.getElementById("student_tb1");
var text1 = document.getElementById("student_textbox1").value;
var text2 = document.getElementById("student_textbox2").value;
var text3 = document.getElementById("student_textbox3").value;
var x = document.getElementById("book_tb1").rows.length;
var message;
message = document.getElementById("message");
message.innerHTML = "";
if(x <= maxRows) {
if(text1 == "select" ){
message.innerHTML = "select the class !! "
}
else if(text2 == "" || isNaN(text2) || text2 < 0 || text2 > 100 || text2 == 0){
message.innerHTML = "your roll no may be between 0 and 101 "
}
else if (text3 == "") {
message.innerHTML = "enter the name"
}
else{
var row = table.insertRow();
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell2.innerHTML = text1;
cell3.innerHTML = text2;
cell4.innerHTML = text3;
for (var i = 0; i < x; i++) {
cell1.innerHTML = i+1;
}
}
alert("Data has been inserted successfully!");
}|
}
</script>
Result:
Sr. No. |Class |Roll no |Name |Action
1 |BSCIT-3 |010 |vishesh |Delete button
You can call this function:
function deleteRow(btn) {
var row = btn.parentNode.parentNode;
row.parentNode.removeChild(row);
}
and make your delete button html:
<input type="button" value="Delete" onclick="deleteRow(this)"/>
I have a problem with accessing the cell value that I have assigned to a cell in the dynamic table using a addRow js function.Now I want to access that value from another js function function re(cal) on button click but when I try to access that value it says that value/innerHtml is undefined.
Here is my html file
<table id="calorie">
<tr><hr></tr>
<tr>
<td><label class="z"><b>Food Item</b></label></td>
<td> <?php
include("connection.php");
$query = "SELECT * FROM foodcataloge";
$result = mysql_query($query) or die("Unable to query Food");
$option = '';
while($row=mysql_fetch_array($result)) {
$option .= '<option value='.$row['FoodCataloge_CalorieAmount'].'>'. $row['FoodCataloge_FoodName'].'</option>';
}
?>
<select name="FoodCataloge_FoodName" id="food" onchange="updateText();"><?php echo $option; ?></select></td>
</tr>
<tr>
<td><label class="z"><b>Portion </b></label></td>
<td> <input type="text"class="span3" name="foodpor" id="foodpor" onchange="pupdate();"></td>
</tr>
<tr>
<td><label class="z"><b>Calorie amount per portion </b></label></td>
<td> <input type="text"class="span3" name="calamount" id="calamount" ></td>
</tr>
<tr><td><label class="z"><b>Number of Calories</b></label></td>
<td> <input type="text" class="span3"name="calo" id="calo"></td>
</tr>
<tr>
<tr><td><label class="z"><b>Total</b></label></td>
<td> <input type="text" class="span3"name="res" id="res"></td>
</tr>
<tr>
<td></td><td></td>
<td><input type = "button" value = "Add" onclick = "showDiv(),addRow('cal')"></td>
<td><input type = "button" value = "Remove" onclick = "deleteRow('cal')"></td>
<td><input type = "button" value = "Calculate" onclick = "re('cal')"></td></tr>
</table>
<br><br><br><br>
<table id="cal" class="table span2" >
<thead>
<th width="30px" id="l1" hidden="true"><label class="z"><b>Remove</b></label></th>
<th width="30px" id="l2"hidden="true"><label class="z"><b>Food</b></label></th>
<th width="30px" id="l3" hidden="true"><label class="z"><b>Portion</b></label></th>
<th width="30px" id="l4" hidden="true"><label class="z"><b>Calories</b></label></th>
<th width="30px" id="l5" hidden="true"><label class="z"><b> Total</b></label></th>
</thead>
</table>
my dynamic table is cal
Here is my js file
function re(cal){
var table = document.getElementById(cal);
var rowCount = table.rows.length;
alert(rowCount);
//or (var i=1;i<rowCount;i++){
var sum =document.getElementById(cal).rows[1].cells[3].value;
alert(sum);
//}
}
function addRow(cal) {
document.getElementById('cal').style.border = "8px solid #718294";
var table = document.getElementById(cal);
var rowCount = table.rows.length;
var cellCount= document.getElementById(cal).rows[0].cells.length;
var row = table.insertRow(rowCount);
row.id="row"
var cell1 = row.insertCell(0);
var element1 = document.createElement("input");
element1.type = "checkbox";
element1.name="chkbox[]";
cell1.appendChild(element1);
var cell2= row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.value=document.getElementById('food').options[document.getElementById('food').selectedIndex].text;
element2.setAttribute('id', 'cell2' + rowCount);
cell2.appendChild(element2);
var cell3= row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.value=document.getElementById('foodpor').value;
element3.setAttribute('id', 'cell3' + rowCount);
cell3.appendChild(element3);
var cell4= row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
element4.value=document.getElementById('calo').value;
element4.setAttribute('class', 'clu');
element4.setAttribute('id', 'cell4' + rowCount);
cell4.appendChild(element4);
var cell5= row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
element5.setAttribute('id', 'cell5' + rowCount);
cell5.appendChild(element5);
//cell2.innerHTML=document.getElementById('food').options[document.getElementById('food').selectedIndex].text;
//cell3.innerHTML=document.getElementById('foodpor').value;
//cell4.innerHTML=document.getElementById('calo').value;
document.getElementById('food').value = '';
document.getElementById('foodpor').value='';
document.getElementById('calo').value='';
document.getElementById('calamount').value='';
}
function deleteRow(cal) {
try {
var table = document.getElementById(cal);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++) {
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if(null != chkbox && true == chkbox.checked) {
table.deleteRow(i);
rowCount--;
i--;
}
}
}catch(e) {
alert(e);
}
}
All the other things working fine but from the function function re(cal) alert the sum as undefined but I expect it to be the value of that selected cell..
Please tell me what I am doing wrong!
From where are you calling re(cal)? the alert? before or after the table creation. If before, that's why it's undefined.