How can I populate a table's cell through JavaScript code?

Question

I have a table as below. I have to populate the "Amount" field using the "Buy Quantity" and "Market Price" field. Amount = Buy Quantity*Market Price. I am doing something as -

<script>
function populate() {
var rows = document.getElementById("mytable").getElementsByTagName("tr");
for ( var i = 1; i <= rows.length; i++) {
    cells = rows[i].getElementsByTagName("td");
    for ( var j = 0; j <= cells.length; j++) {
        if (j == 1) {
            var num1 =parseFloat(cells[1].childNodes[0].value);
            var num2 =parseFloat(cells[2].childNodes[0].data);
            var num3=num1 * num2;
            cells[3].childNodes[0].value = num3.toString();
        }
     }
   }
 }
</script>

I can get the values of column1 and column2, but the value in last column is not getting populated. The last line does not seem to work.

cells[3].childNodes[0].value = num3.toString();

What should I change?

The below html code is part of my .jsp file.

 <form action="BuyServlet">
    <table border="1" cellpadding="5" id="mytable">
        <tr>
            <th>Stock Name</th>
            <th>Buy Quantity</th>
            <th>Market Price</th>
            <th>Amount</th>
        </tr>
        <tr>
            <td>Stock Name</td>
            <td><input type="text" name="quantity" onblur="populate()"></td>
            <td>122</td>
            <td><input type="text" name="amount">
            </d>
        </tr>
        <tr>
            <td>Stock Name</td>
            <td><input type="text" name="quantity" onblur="populate()"></td>
            <td>111</td>
            <td><input type="text" name="amount"></td>
        </tr>
    </table>
</form>

Answer 1

Your code is in need of improvement. In your table, you should have a thead and a tbody sections. This will make it more accessible and easier to ingore the heading row.

<table border="1" cellpadding="5" id="mytable">
        <thead>
          <tr>
            <th>Stock Name</th>
            <th>Buy Quantity</th>
            <th>Market Price</th>
            <th>Amount</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Stock Name</td>
            <td><input type="text" name="quantity"></td>
            <td>122</td>
            <td><input type="text" name="amount"></td>
          </tr>
          <tr>
            <td>Stock Name</td>
            <td><input type="text" name="quantity"></td>
            <td>111</td>
            <td><input type="text" name="amount"></td>
          </tr>
        </tbody>
    </table>
</form>

Now with the code, you should be adding the onblur with code, not hardcoded. You are looping through the cells, there is no reason for that. Also there is no need to loop every row when the table is changed. Just calculate the one that changed! Using childNodes can be tricky because of whitespace differences in browsers. Run this code after the table has been rendered.

(function () {

    var table = document.getElementById("mytable");
    var tbody = table.getElementsByTagName("tbody")[0];
    var rows = tbody.getElementsByTagName("tr");​​​​​​​​​

    function populateRow (index, addBlurEvent) {
        var row = rows[index];
        var cells = row.getElementsByTagName("td")
        var textboxes = row.getElementsByTagName("input");

        var amountTextbox = textboxes[0];
        var totalTextbox = textboxes[1];
        var costCell = cells[2];

        var amount = amountTextbox.value.length>0 ? parseFloat(amountTextbox.value) : 0;
        var cost = parseFloat(costCell.innerHTML);
        var total = amount * cost;
        totalTextbox.value = total;

        if (addBlurEvent) {
            amountTextbox.onblur = function () { populateRow(index, false); };
        }

    }

    for (i=0;i<rows.length;i++) {
        populateRow(i, true);    
    }

}());    

The running fiddle of the above code ​

Answer 2

I think the error is due to spelling mistake - you have childnodes instead of childNodes on "cells[3].childnodes[0].value = num3.toString();"

Check this fiddle - http://jsfiddle.net/VwU7C/

Answer 3

Basically you are getting the value from the text box (best quantity) and you are using data to get the value of the Market price(better use innerText)

try this (Replace with your code inside loop)

var num1 =parseFloat(cells[1].childNodes[0].value);
var num2 =parseFloat(cells[2].innerText);
var num3=num1 * num2;
cells[3].innerText = num3.toString();