如何在另一个java脚本函数中访问java脚本中动态html表中单元格的动态赋值

使用addRowjs函数访问分配给动态表中某个单元格的单元格值时遇到问题。现在，我想在单击按钮时从另一个js函数function re(cal)访问该值，但当我尝试访问该值时，它表示值/innerHtml未定义。

这是我的html文件

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

我的动态表是cal

这是我的js文件

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

所有其他事情都很好，但函数function re(cal)提醒sum未定义，但我希望它是所选单元格的值。。

请告诉我我做错了什么！