Develop Reference

How to delete a row from HTML table using the button which is in the next cell of the data entered?

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)"/>

Display Dialog Box In Order to Add New Row to HTML Table

So I currently have an HTML table where I can add rows to the end of the table. A new row appears with text boxes inside and you can enter information.
However, I am wanting to do away with that and use a new method. I am wanting it so that when the add row button is clicked, a dialog box pops up and gives me the option to add the information for the row. Then it uses the validation to make sure the row is good to go and then adds the row to the table.
How would I be able to do this?
You can see the demo...
http://codepen.io/Rataiczak24/pen/wzpJop
JavaScript:
// ----- Deactivate/Activate Row -----
$(document).on("click", "#html_master .deactivate", function () {
var $this = $(this);
var $tr = $this.closest('tr');
var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate';
// ------ Confirmation box in order to deactivate/activate row -----
if (confirm('Are you sure you want to ' + action + ' this entry?')) {
$tr.toggleClass('deactivated');
$this.val(function (i, t) {
return t == 'Deactivate' ? 'Activate' : 'Deactivate';
});
}
});
// ----- Edit Row -----
$(document).on("click", "#html_master .edit", function () {
var $this = $(this);
var tds = $this.closest('tr').find('td').not('.mr_id').filter(function () {
return $(this).find('.edit').length === 0;
});
if ($this.val() === 'Edit') {
$this.val('Save');
tds.prop('contenteditable', true);
} else {
var isValid = true;
var errors = '';
$('#myDialogBox').empty();
// changed from here.......
var elements = tds;
if (tds.find('input').length > 0) {
elements = tds.find('input');
}
elements.each(function (index, element) {
var type = $(this).attr('class');
var value = (element.tagName == 'INPUT') ? $(this).val() : $(this).text();
// changed from here....... to here
// ----- Switch statement that provides validation -----
switch (type) {
case "buyer_id":
if (!$.isNumeric(value)) {
isValid = false;
errors += "Please enter a valid Buyer ID\n";
}
break;
case "poc_n":
if (value == value.match(/^[a-zA-Z\s]+$/)) {
break;
}
else {
isValid = false;
errors += "Please enter a valid Name\n";
}
break;
case "poc_e":
if (value == value.match(/^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)) {
break;
}
else {
isValid = false;
errors += "Please enter a valid Email\n";
}
break;
case "poc_p":
if (value == value.match('^[0-9 ()+/-]{10,}$')) {
break;
}
else {
isValid = false;
errors += "Please enter a valid Phone Number\n";
}
break;
}
})
if (isValid) {
$this.val('Edit');
tds.prop('contenteditable', false);
} else {
alert(errors);
}
}
});
// ----- Add Row -----
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
cell1.className = 'mr_id';
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
element2.className = 'mr_name';
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
element3.className = 'buyer_id';
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
element4.className = 'poc_n';
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
element5.className = 'poc_e';
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
element6.className = 'poc_p';
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
var element8 = document.createElement("input");
element7.type = "button";
element8.type = "button";
element7.name = "edit";
element8.name = "deactivate";
var setClass = document.createAttribute("class");
setClass.value = "edit";
element7.setAttributeNode(setClass);
var setClass1 = document.createAttribute("class");
setClass1.value = "deactivate";
element8.setAttributeNode(setClass1);
element7.attr = "class";
element8.attr = "class";
element7.value = "Save";
element8.value = "Deactivate";
cell7.appendChild(element7);
cell7.appendChild(element8);
}
HTML/PHP:
<table id="html_master">
<thead>
<tr>
<td>ID</td>
<td>Vendor</td>
<td>Buyer ID</td>
<td>POC Name</td>
<td>POC Email</td>
<td>POC Phone</td>
<td>Edit/Delete</td>
</tr>
</thead>
<tbody>
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
<td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
<td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
<td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>
<td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
<td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
<td><input type="button" class="edit" name="edit" value="Edit">
<input type="button" class="deactivate" name="deactivate" value="Deactivate"></td>
</tr>
<?php
}
?>
</tbody>
<br>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</table>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</body>
</html>

You can use the modal popup. Take a look at it: How to create a modal popup using javascript
You would have to a create separate div on that modal, put all the required input fields in that sub div.
All you need to do is trigger that popup on "Add row" button click, get the user input, close the popup, verify the code and inject it into table.
I've written this code for you, I hope it helps
HTML
<table border="1" style="width:100%;">
<thead>
<tr style="font-weight:bold;">
<td>Field 1</td>
<td>Field 2</td>
</tr>
</thead>
<tbody id="tBody"></tbody>
</table>
<button onclick="showModal();">Add Row</button>
<div class="modal" id="modal">
<div class="content">
<input type="text" id="field1" placeholder="Field 1" /><br />
<input type="text" id="field2" placeholder="Field 2" />
<br />
<button onclick="addRow();">Add</button>
<button onclick="closeModal();">Close</button>
</div>
</div>
CSS
.modal{
display:none;
background:#fff;
opacity:0.9;
position:fixed;
top:0;
width:100%;
height:100%;
}
.content{
width:300px;
background:#f2f2f2;
margin:0 auto;
padding:2%;
}
JS
function showModal(){
document.getElementById("modal").style.display = "block";
}
function closeModal(){
document.getElementById("modal").style.display = "none";
}
function addRow(){
var tBody = document.getElementById("tBody");
var field1 = document.getElementById("field1");
var field2 = document.getElementById("field2");
/* Your validation code here */
var rowData = '<tr>'
+ '<td>'+field1.value+'</td>'
+ '<td>'+field2.value+'</td>'
+ '</tr>';
if(tBody.innerHTML!=null){
tBody.innerHTML = tBody.innerHTML + rowData;
}else{
tBody.innerHTML = rowData;
}
alert("row has been added!");
field1.value='';
field2.value='';
closeModal();
}

Adding Validation to Rows Dynamically Added two Table

So I have a table with two separate buttons, Edit and Deactivate. I was able to use a bind function on the deactivate and edit in order to get the button to work when I added rows. I also have validation for most of the fields. The validation works perfectly on the original rows, but does not work on any rows that are added by the user. How can I fix this?
HTML/PHP:
<table id="html_master">
<thead>
<tr>
<td>ID</td>
<td>Vendor</td>
<td>Buyer ID</td>
<td>POC Name</td>
<td>POC Email</td>
<td>POC Phone</td>
<td>Edit/Delete</td>
</tr>
</thead>
<tbody>
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
<td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
<td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
<td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>
<td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
<td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
<td><input type="button" class="edit" name="edit" value="Edit">
<input type="button" class="deactivate" name="deactivate" value="Deactivate"></td>
</tr>
<?php
}
?>
</tbody>
<br>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</table>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</body>
</html>
JavaScript:
// ----- Deactivate Row -----
function bindDeactivate() {
$('#html_master').on("click",".deactivate",function() {
var $this = $(this);
var $tr = $this.closest('tr');
var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate';
if (confirm('Are you sure you want to ' + action + ' this entry?')) {
$tr.toggleClass('deactivated');
$this.val(function(i, t) {
return t == 'Deactivate' ? 'Activate' : 'Deactivate';
});
}
});
}
$(document).ready(function() {
// Bind the deactivate button click to the function
bindDeactivate();
});
$(document).ready(function() {
// Bind the edit button click to the function
bindEdit();
});
// ----- Add Row -----
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
var element8 = document.createElement("input");
element7.type = "button";
element8.type = "button";
element7.name="edit";
element8.name="deactivate";
var setClass = document.createAttribute("class");
setClass.value = "edit";
element7.setAttributeNode(setClass);
var setClass1 = document.createAttribute("class");
setClass1.value = "deactivate";
element8.setAttributeNode(setClass1);
element7.attr="class";
element8.attr="class";
element7.value="Edit";
element8.value="Deactivate";
cell7.appendChild(element7);
cell7.appendChild(element8);
// Bind this new deactivate button click to the function
$('#html_master').off("click",'.deactivate');
bindDeactivate();
// Bind this new deactivate button click to the function
$('#html_master').off("click",'.edit');
bindEdit();
}
function bindEdit() {
$('#html_master').on("click",".edit",function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() {
return $(this).find('.edit').length === 0;
});
if ($this.val() === 'Edit') {
$this.val('Save');
tds.prop('contenteditable', true);
} else {
var isValid = true;
var errors = '';
$('#myDialogBox').empty();
tds.each(function(){
var type = $(this).attr('class');
var value = $(this).text();
switch(type){
case "buyer_id":
if(!$.isNumeric(value)){
isValid = false;
errors += "Please enter a valid Buyer ID\n";
}
break;
case "poc_n":
if(value == value.match(/^[a-zA-Z\s]+$/)){
break;
}
else {
isValid = false;
errors += "Please enter a valid Name\n";
}
break;
case "poc_e":
if(value == value.match(/^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)){
break;
}
else {
isValid = false;
errors += "Please enter a valid Email\n";
}
break;
case "poc_p":
if(value == value.match('^[0-9 ()+/-]{10,}$')){
break;
}
else {
isValid = false;
errors += "Please enter a valid Phone Number\n";
}
break;
}
})
if(isValid){
$this.val('Edit'); // Modifed
tds.prop('contenteditable', false);
}else{
alert(errors);
}
}
});
}

Bind Function to Allow Added Buttons to Function Correctly

So I have a table with two separate buttons, Edit and Deactivate. I was able to use a bind function on the deactivate in order to the button to work when i added rows. However, I can't seem to figure out the edit button. I think that I have copied most of the information correctly from my other bind function, but have seen no success yet. Was hoping someone may be able to offer up some help. I am just needing the Edit button to work and function correctly when additional rows are added to the table.
HTML/PHP:
<html>
<head>
<title>Stage Rebate Master HTML Table</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="html_master.css">
<script type="text/javascript" src="html_master.js"></script>
</head>
<label id="table_name">Stage_Rebate_Master</label><br>
<body>
<img src="carter.png" alt="Carter Lumber" id="carter">
<table id="html_master">
<thead>
<tr>
<td>ID</td>
<td>Vendor</td>
<td>Buyer ID</td>
<td>POC Name</td>
<td>POC Email</td>
<td>POC Phone</td>
<td>Edit/Delete</td>
</tr>
</thead>
<tbody>
<?php
foreach ($dbh->query($sql) as $rows){
?>
<tr>
<td class="mr_id" contenteditable="false"><?php echo intval ($rows['MR_ID'])?></td>
<td class="mr_name" contenteditable="false"><?php echo $rows['MR_Name']?></td>
<td class="buyer_id" contenteditable="false"><?php echo $rows['Buyer_ID']?></td>
<td class="poc_n" contenteditable="false"><?php echo $rows['MR_POC_N']?></td>
<td class="poc_e" contenteditable="false"><?php echo $rows['MR_POC_E']?></td>
<td class="poc_p" contenteditable="false"><?php echo $rows['MR_POC_P']?></td>
<td><input type="button" class="edit" name="edit" value="Edit">
<input type="button" class="deactivate" name="deactivate" value="Deactivate"></td>
</tr>
<?php
}
?>
</tbody>
<br>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</table>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</body>
</html>
JavaScript:
// ----- Deactivate Row -----
function bindDeactivate() {
$('#html_master').on("click",".deactivate",function() {
var $this = $(this);
var $tr = $this.closest('tr');
var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate';
if (confirm('Are you sure you want to ' + action + ' this entry?')) {
$tr.toggleClass('deactivated');
$this.val(function(i, t) {
return t == 'Deactivate' ? 'Activate' : 'Deactivate';
});
}
});
}
$(document).ready(function() {
// Bind the deactivate button click to the function
bindDeactivate();
});
$(document).ready(function() {
// Bind the edit button click to the function
bindEdit();
});
// ----- Add Row -----
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
var element8 = document.createElement("input");
element7.type = "button";
element8.type = "button";
element7.name="edit";
element8.name="deactivate";
var setClass = document.createAttribute("class");
setClass.value = "edit";
element7.setAttributeNode(setClass);
var setClass1 = document.createAttribute("class");
setClass1.value = "deactivate";
element8.setAttributeNode(setClass1);
element7.attr="class";
element8.attr="class";
element7.value="Edit";
element8.value="Deactivate";
cell7.appendChild(element7);
cell7.appendChild(element8);
// Bind this new deactivate button click to the function
$('#html_master').off("click",'.deactivate');
bindDeactivate();
// Bind this new deactivate button click to the function
$('#html_master').off("click",'.edit');
bindEdit();
}
function bindEdit() {
$('#html_master').on("click",".edit",function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() {
return $(this).find('.edit').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
var isValid = true;
var errors = '';
$('#myDialogBox').empty();
tds.each(function(){
var type = $(this).attr('class');
var value = $(this).text();
switch(type){
case "buyer_id":
if(!$.isNumeric(value)){
isValid = false;
errors += "Please enter a valid Buyer ID\n";
}
break;
case "poc_n":
if(value == value.match(/^[a-zA-Z\s]+$/)){
break;
}
else {
isValid = false;
errors += "Please enter a valid Name\n";
}
break;
case "poc_e":
if(value == value.match(/^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)){
break;
}
else {
isValid = false;
errors += "Please enter a valid Email\n";
}
break;
case "poc_p":
if(value == value.match('^[0-9 ()+/-]{10,}$')){
break;
}
else {
isValid = false;
errors += "Please enter a valid Phone Number\n";
}
break;
}
})
if(isValid){
$this.html('Edit');
tds.prop('contenteditable', false);
}else{
alert(errors);
}
}
});
}

Use Below Code
<!DOCTYPE html>
<html>
<head>
<script src="jquery.min.js"></script>
<script type="text/javascript" >
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
cell1.innerHTML = rowCount;
var cell2 = row.insertCell(1);
var element2 = document.createElement("input");
element2.type = "text";
element2.name = "txtbox[]";
cell2.appendChild(element2);
var cell3 = row.insertCell(2);
var element3 = document.createElement("input");
element3.type = "text";
element3.name = "txtbox[]";
cell3.appendChild(element3);
var cell4 = row.insertCell(3);
var element4 = document.createElement("input");
element4.type = "text";
element4.name = "txtbox[]";
cell4.appendChild(element4);
var cell5 = row.insertCell(4);
var element5 = document.createElement("input");
element5.type = "text";
element5.name = "txtbox[]";
cell5.appendChild(element5);
var cell6 = row.insertCell(5);
var element6 = document.createElement("input");
element6.type = "text";
element6.name = "txtbox[]";
cell6.appendChild(element6);
var cell7 = row.insertCell(6);
var element7 = document.createElement("input");
var element8 = document.createElement("input");
element7.type = "button";
element7.setAttribute("class","edit");
element8.setAttribute("class","deactivate");
element8.type = "button";
element7.name="edit";
element8.name="deactivate";
element7.value="Edit";
element8.value="Deactivate";
cell7.appendChild(element7);
cell7.appendChild(element8);
}
$(document).on('click','.deactivate',function() {
var $this = $(this);
var $tr = $this.closest('tr');
var action = $tr.hasClass('deactivated') ? 'activate' : 'deactivate';
if (confirm('Are you sure you want to ' + action + ' this entry?')) {
$tr.toggleClass('deactivated');
$this.text(function(i, t) {
return t == 'Deactivate' ? 'Activate' : 'Deactivate';
});
}
});
$(document).on('click','.edit',function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').not('.mr_id').filter(function() {
return $(this).find('.edit').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
var isValid = true;
var errors = '';
$('#myDialogBox').empty();
tds.each(function(){
var type = $(this).attr('class');
var value = $(this).text();
switch(type){
case "buyer_id":
if(!$.isNumeric(value)){
isValid = false;
errors += "Please enter a valid Buyer ID\n";
}
break;
case "poc_n":
if(value == value.match(/^[a-zA-Z\s]+$/)){
break;
}
else {
isValid = false;
errors += "Please enter a valid Name\n";
}
break;
case "poc_e":
if(value == value.match(/^[\w\-\.\+]+\#[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/)){
break;
}
else {
isValid = false;
errors += "Please enter a valid Email\n";
}
break;
case "poc_p":
if(value == value.match('^[0-9 ()+/-]{10,}$')){
break;
}
else {
isValid = false;
errors += "Please enter a valid Phone Number\n";
}
break;
}
})
if(isValid){
$this.html('Edit');
tds.prop('contenteditable', false);
}else{
alert(errors);
}
}
});
</script>
</head>
<body>
<table id="html_master">
<thead>
<tr>
<td>ID</td>
<td>Vendor</td>
<td>Buyer ID</td>
<td>POC Name</td>
<td>POC Email</td>
<td>POC Phone</td>
<td>Edit/Delete</td>
</tr>
</thead>
<tbody>
</tbody>
<br>
<input type="button" class="add" value="Add Row" onclick="addRow('html_master')">
</table>
</body>
</html>

How to access the dynamically assigned value for a cell in the dynamic html table in java script within another java script function

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.