title: How to get the row index in a HTML table
body: <p>I'm trying to update a database users table. 
  I made an HTML table which contains the data of the users in my database.
  this HTML table contains 3 columns and in each row there is a button. when I click this button I should update the users database table with the information contained in the input and select field in the cells of the html table. 
  my html code is:</p>
  
  <pre><code>&lt;tr&gt;
    &lt;td&gt;&lt;input type="text" name ="name"/&gt;&lt;/td&gt;
    &lt;td&gt;
        &lt;select name="select_job"&gt;
           &lt;option value="1"&gt; Engineer &lt;/option&gt;
           &lt;option value="2"&gt; Doctor &lt;/option&gt;
        &lt;/select&gt;
    &lt;/td&gt;
    &lt;td&gt;&lt;button&gt;update &lt;/button&gt;&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>I tried to get the number of the rows on which the update button was clicked and then to get the data in each column but I failed .
  my js code is:</p>
  
  <pre><code>$("button").click( function() {
   var $row = $(this).parent().parent(); //tr
    var $columns = $row.find('td');
    $.each($columns, function(i, item) {
  
     values = values + 'td' + (i ) +':&lt;br/&gt;';
  
  
  });
  
   });
  </code></pre>
  
  <p>How can I get the data (inpt text, selected item) in the row on which I clicked the button?</p>