Problems with traversing table using DOM
<p>I managed to fix some trouble I was having with traversing through table rows with DOM using only JavaScript but ran into 2 hurdles. I'm trying to create a table, where each row will have a set of buttons to move that particular row up, down or remove it. I was able to successfully use the .replaceChild method but it replaces the row instead of just swapping them. When I tried .moveRow, I keep getting an error saying the HTML table section does not have that method. I run into the same problem when trying to swap the current row with the row below. Any suggestions?</p>

<pre><code>function up(x){

        // var tableBody = document.getElementsByTagName("tbody")[0]; // tried it with tableBody and it still didn't work
        var table = x.parentNode.parentNode.parentNode;
        var tableRow = x.parentNode.parentNode.cloneNode(true);
        var previousRow = x.parentNode.parentNode.previousSibling.cloneNode(true);
        table.replaceChild(tableRow,x.parentNode.parentNode.previousSibling);

    }

    function down(x){
        var table = x.parentNode.parentNode.parentNode;
        var tableRow = x.parentNote.parentNode.cloneNode(true);
        var belowRow = x.parentNode.parentNode.nextSibling.cloneNode(true);
        table.moveRow(tableRow,x.parentNode.parentNode.nextSibling);
    }
</code></pre>

<p>My buttons:</p>

<pre><code>&lt;table id="table1" border="1"&gt;
        &lt;tbody&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"&gt;
                &lt;td id="buttons"&gt;
                    &lt;input type="button" value="Up" onclick="up(this)" /&gt;
                    &lt;input type="button" value="Down" onclick="down(this)" /&gt; 
                &lt;/td&gt;
            &lt;/tr&gt;
        &lt;/tbody&gt;
        &lt;/table&gt;    
</code></pre>
