title: Change css properties on particular row in table
body: <p>I'm posting a simple question, but here s the code first:</p>
  
  <p>HTML :</p>
  
  <pre><code>&lt;table&gt;
  &lt;tr&gt;
    &lt;td&gt;&lt;input type="button" onclick="someFunc()" /&gt; &lt;/td&gt;
    &lt;td&gt; Person&lt;/td&gt;
    &lt;td&gt; Salary &lt;/td&gt;
  &lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>table, td{
    border: 2px solid black;
    background-color: pink;
  }
  </code></pre>
  
  <p><a href="https://jsfiddle.net/vcrj9aus/" rel="nofollow">https://jsfiddle.net/vcrj9aus/</a>   - for easier purposes.</p>
  
  <p>I only made 1 row on the table, but the idea is as it goes:</p>
  
  <p>Take random data out of a form and append it to the table, adding in each new row the button  and the given data underneath "Person" and "Salary".  And when you click the button, it should change the background color, or whatever CSS property of the row it is on. Like if i press the button on the first row, only the background color of the first row should be changed.</p>
  
  <p>Edit: I know Jquery would be easier to make things work here, but I need a javascript solution for learning purposes, how would function someFunc() {} look like </p>