title: edit and delete tr dynamically in table with javascript
body: <p>I am preparing a table and creating rows dynamically with javascript. This Table would have input given by user. It would have three main features.<br/>  The first feature of the table is : As the user would add details and click on 'Add' button. a new row would add to table containing  the input given by user.<br />
  The second one is: As  the user would click on any row of the table the respected data of the rows would be shown in the input form.<br />
  The last feature is: As user clicks on the rows he could delete and edit that selected row.</p>
  
  <p>I could add rows in table but the later part I am not getting that how to do..
  <br/> jss fiddle :<a href="http://jsfiddle.net/avnesh/N7tza/2/" rel="nofollow">http://jsfiddle.net/avnesh/N7tza/2/</a></p>
  
  <pre><code>&lt;table border="1" id="table"&gt;
  &lt;tr id="myRow"&gt;
      &lt;td&gt;First cell&lt;/td&gt;
      &lt;td&gt;Second cell&lt;/td&gt;
      &lt;td&gt;Third cell&lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  &lt;br&gt;
  &lt;input type="text" id='inputone' /&gt;
  &lt;input type="text" id='inputtwo' /&gt;
  &lt;input type="text" id='inputthree' /&gt;
  &lt;button onclick="myFunction()"&gt;Add to table&lt;/button&gt;
  &lt;button onclick="deleteTr();"&gt;delete&lt;/button&gt;
  &lt;script&gt;
  myFunction = function () {
  input1 = document.getElementById('inputone');
  Value1 = input1.value;
  input2 = document.getElementById('inputtwo');
  Value2 = input2.value;
  input3 = document.getElementById('inputthree');
  Value3 = input3.value;
  R = document.getElementById("table").rows.length;
  one = 1;
  I = R + one;
  var table = document.getElementById("table");
  var x = table.insertRow(0);
  x.insertCell(0).innerHTML = "&lt;input type='text' value='" + Value3 + "' name='" + I + "'&gt;";
  x.insertCell(0).innerHTML = "&lt;input type='text' value='" + Value2 + "' name='" + I + "'&gt;";
  x.insertCell(0).innerHTML = "&lt;input type='text' value='" + Value1 + "' name='" + I + "'&gt;";
  } //end myFunction
  
  assignTrIndex = function () {
  var rows = document.getElementById('table').rows;
  for (var i = 0; i &lt;= rows.length; i++) {
      rows[i].onclick = getRowIndex(this)
  }
  }
  
  var rowIndx = '';
  getRowIndex = function (z) {
  //alert(z.rowIndex);    
  var rowIndx = z.rowIndex;
  }
  
  deleteTr = function () {
  document.getElementById('table').deleteRow(rowIndx);
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>`
  <br/>p.s.
  <br/>
  I am trying to call row index in delete function(deleteTr) to delete that selected row. So I am assigning a function of getting row index(assignTrIndex) on table rows but it is not working.I am using Jquery only to produce Input form for user. I want to solve this problem with javascript only.
  <br/>
  thanks in advance ..</p>