title: onblur functionality for TR
body: <p>What can I do to simulate or use the onblur functionality for a TR.</p>
  
  <p>Here's my jsfiddle
  <a href="http://jsfiddle.net/davomarti/4L859p5t/2/" rel="nofollow">http://jsfiddle.net/davomarti/4L859p5t/2/</a></p>
  
  <pre><code>&lt;table&gt;
    &lt;tr id="view_1" onclick="showEditRow( '1' )"`enter code here`&gt;
      &lt;td&gt;val1_1&lt;/td&gt;
      &lt;td&gt;val1_2&lt;/td&gt;
      &lt;td&gt;val1_3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="edit_1" style="display:none" onblur="showViewRow( '1' )"&gt;
      &lt;td&gt;&lt;input type="text" value="val1_1"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="val1_2"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="val1_3"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="view_2" onclick="showEditRow( '2' )"&gt;
      &lt;td&gt;val2_1&lt;/td&gt;
      &lt;td&gt;val2_2&lt;/td&gt;
      &lt;td&gt;val2_3&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr id="edit_2" style="display:none" onblur="showViewRow( '2' )"&gt;
      &lt;td&gt;&lt;input type="text" value="val2_1"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="val2_2"/&gt;&lt;/td&gt;
      &lt;td&gt;&lt;input type="text" value="val2_3"/&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;
  
  function showEditRow( rowId ) {
      var editElemId = "#edit_" + rowId;
      var viewElemId = "#view_" + rowId;
  
      $(viewElemId).hide();
      $(editElemId).show();
  }
  
  function showViewRow(rowElem) {
      var editElemId = "#edit_" + rowId;
      var viewElemId = "#view_" + rowId;
  
      $(viewElemId).show();
      $(editElemId).hide();
  }
  </code></pre>
  
  <p>I have coded onblur for the TR and I know that doesn't work for a TR.</p>
  
  <p>I want to click on a row and get the edit boxes to replace the text, then when I click out of the row, I want the edit boxes to be replaced by the text TR.</p>