如何在另一个Java脚本功能内的Java脚本中访问动态html表中单元格的动态分配值

Question

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!

Answer 1

From where are you calling re(cal)? the alert? before or after the table creation. If before, that's why it's undefined.