title: How to populate a textbox in a table on the 'onblur' event of a different textbox in the same table?
body: <p>I have a table as below. I have to populate the <code>Amount</code> field using the <code>Buy Quantity</code> and <code>Market Price</code> field. <code>Amount = Buy Quantity*Market Price</code>. I am doing something as -</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"     "http://www.w3.org/TR/html4/loose.dtd"&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
  &lt;title&gt;Buy Stocks&lt;/title&gt;
  
  &lt;script&gt;
  (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&gt;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&lt;rows.length;i++){
      populateRow(i,true);    
  }
  })();
  
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;center&gt;
  
  &lt;h5&gt;Buy Stocks Here&lt;/h5&gt;
      &lt;form &gt;
     &lt;table border="1" cellpadding="5" id="mytable"&gt;
      &lt;thead&gt;
        &lt;tr&gt;
          &lt;th&gt;Stock Name&lt;/th&gt;
          &lt;th&gt;Buy Quantity&lt;/th&gt;
          &lt;th&gt;Market Price&lt;/th&gt;
          &lt;th&gt;Amount&lt;/th&gt;
        &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
  &lt;tr&gt;
          &lt;td&gt;Stock Name&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="quantity" &gt;&lt;/td&gt;
          &lt;td&gt;122&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="amount"&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
        &lt;tr&gt;
          &lt;td&gt;Stock Name&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="quantity" &gt;&lt;/td&gt;
          &lt;td&gt;111&lt;/td&gt;
          &lt;td&gt;&lt;input type="text" name="amount"&gt;&lt;/td&gt;
        &lt;/tr&gt;
  
      &lt;/tbody&gt;
    &lt;/table&gt;
   &lt;/form&gt;
  &lt;/center&gt;
  </code></pre>
  
  <p></p>
  
  <p>The above html's javascript function is supposed to work perfectly, I am not able to handle the 'onblur' event. How and where should I do that? Please suggest an answer which does not modify the script. Thanks.</p>
  
  <p>Image for reference : </p>
  
  <p><img src="https://i.stack.imgur.com/zkvxO.png" alt="enter image description here"></p>