Dynamic tables and DOM
<p>I've created a table through HTML where one of the columns contains a series of buttons to add a new row, delete that specific row or move the row up or down. I'm able to add a new row but I'm having some trouble removing the same row the button was pressed on. I used an alert method to display the row index and when I click the button, it shows the row index is undefined but if I click anywhere else in that same row, it shows the correct row index! </p>

<p>I'm fairly new at Javascript and would like to do this using pure JavaScript.  </p>

<p>I set an alert to figure out which row index is being called and for some reason, when I click the button, it says the row index is undefined but the next alert box shows the correct row index. </p>

<pre><code>    function removeData(x) {
        var ind = x.rowIndex;
        alert(ind);
        //document.getElementById("table1").deleteRow(ind);
    }

   &lt;table id="table1" border="2px"&gt;
            &lt;tr&gt;
                &lt;th&gt;Column 1&lt;/th&gt; &lt;th&gt;Column 2&lt;/th&gt; &lt;th&gt;Column 3&lt;/th&gt; &lt;th&gt;Column 4&lt;/th&gt; 
            &lt;/tr&gt;   
            &lt;tr id="enterData" onclick="removeData(this)"&gt;
                &lt;td id="buttons"&gt;&lt;input type="button" value="Remove" id="button1" onclick="removeData(this)" /&gt; 
                    &lt;input type="button" value="Up" id="button2" onclick="up()" /&gt;
                    &lt;input type="button" value="Down" id="button3" onclick="down()" /&gt; 
                    &lt;input type="button" value="Add" id="button4" onclick="editTable()" /&gt;
                &lt;/td&gt;
            &lt;/tr&gt;       
        &lt;/table&gt;
</code></pre>
