asked on

Moving Table Rows Up and Down

I need some creative thinking ...

I am including a small HTML example with some simple script that displays a TABLE with each row containing two buttons. One button that will move the current row clicked UP and the other that will move the current row clicked DOWN. I was thinking that I could do this by finding the row that the button clicked was on (acheived with getParentRow()) and then find that TR's previous or next sibling and replace them accordingly. I thought that this would work because I thought that the siblings of a TR would be TRs (or null in some cases) but I am finding this not to be the case.

Can someone shed some light as to why the siblings are not as I thought and a possible alternative way to find and swap the TRs with one another?

<html>
      <head>
            <title>test page</title>
            <script type="text/javascript">
                  function moveRow(e) {
                        var button = (window.event) ? window.event.srcElement : e.target;
                        var row = getParentRow(button);
                        alert("Button's Parent Row: " + row);
                        alert("Row's Prev Sibling: " + row.prevSibling);
                        alert("Row's Next Sibling: " + row.nextSibling);
                  }
                  function getParentRow(obj) {
                        var tmp = obj;
                        while (tmp = tmp.parentNode)
                              if (tmp.nodeName == "TR")
                                    return tmp;
                  }
            </script>
      </head>
      <body>
            <table border="0" cellpadding="0" cellspacing="0">
                  <thead>
                        <tr>
                              <th>NUMBER</th>
                              <th colspan="2">MOVE</th>
                        </tr>
                  </thead>
                  <tbody>
                        <tr>
                              <td>1</td>
                              <td><input type="button" value="UP" onclick="moveRow(event);"></td>
                              <td><input type="button" value="DOWN" onclick="moveRow(event);"></td>
                        </tr>
                        <tr>
                              <td>2</td>
                              <td><input type="button" value="UP" onclick="moveRow(event);"></td>
                              <td><input type="button" value="DOWN" onclick="moveRow(event);"></td>
                        </tr>
                        <tr>
                              <td>3</td>
                              <td><input type="button" value="UP" onclick="moveRow(event);"></td>
                              <td><input type="button" value="DOWN" onclick="moveRow(event);"></td>
                        </tr>
                        <tr>
                              <td>4</td>
                              <td><input type="button" value="UP" onclick="moveRow(event);"></td>
                              <td><input type="button" value="DOWN" onclick="moveRow(event);"></td>
                        </tr>
                        <tr>
                              <td>5</td>
                              <td><input type="button" value="UP" onclick="moveRow(event);"></td>
                              <td><input type="button" value="DOWN" onclick="moveRow(event);"></td>
                        </tr>
                  </tbody>
            </table>
      </body>
</html>

ASKER CERTIFIED SOLUTION

mshogren

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dfu23

ASKER

Thanks very much,

You are absolutely on point with the previousSibling suggestion. That was the breaking point that I needed. From there I was able to find that white space is not my friend in attempting to do this so I completely removed it by adding the rows programmatically with JavaScript. I was hoping that this wasn't going to be the case but I can't find an easy way around this ... not to mention this method gives me exactly the results that I want.

Here is the working solution if anyone is curious:

<html>
      <head>
            <title>test page</title>
            <script type="text/javascript">
                  var counter = 0;
                  function moveRow(e) {
                        var tblBody = document.getElementById("tblBody");
                        var button = (window.event) ? window.event.srcElement : e.target;
                        var row = getParentRow(button);

                        switch (button.value.toUpperCase()) {
                              case "DOWN":
                                    if (row.nextSibling) {
                                          var tmp1 = row;
                                          var tmp2 = tblBody.removeChild(row.nextSibling);
                                          tblBody.insertBefore(tmp2, tmp1);
                                    }
                                    break;
                              case "UP":
                                    if (row.previousSibling) {
                                          var tmp1 = row.previousSibling;
                                          var tmp2 = tblBody.removeChild(row);
                                          tblBody.insertBefore(tmp2, tmp1);
                                    }
                                    break;
                        }
                  }
                  function getParentRow(obj) {
                        var tmp = obj;
                        while (tmp = tmp.parentNode)
                              if (tmp.nodeName.toUpperCase() == "TR")
                                    return tmp;
                  }
                  function addRow() {
                        var tblBody = document.getElementById("tblBody");

                        var tr = document.createElement("TR");
                        var td1 = document.createElement("TD");
                        var td2 = document.createElement("TD");
                        var td3 = document.createElement("TD");

                        var text = document.createTextNode(counter++);

                        var input1 = document.createElement("INPUT");
                        input1.type = "button";
                        input1.value = "UP";

                        var input2 = document.createElement("INPUT");
                        input2.type = "button";
                        input2.value = "DOWN";

                        if (document.addEventListener) {
                              input1.addEventListener("click", moveRow, false);
                              input2.addEventListener("click", moveRow, false);
                        }
                        else {
                              input1.onclick = moveRow;
                              input2.onclick = moveRow;
                        }

                        td1.appendChild(text);
                        td2.appendChild(input1);
                        td3.appendChild(input2);

                        tr.appendChild(td1);
                        tr.appendChild(td2);
                        tr.appendChild(td3);

                        tblBody.appendChild(tr);
                  }
                  window.onload = function() {
                        addRow();
                        addRow();
                        addRow();
                        addRow();
                        addRow();
                  }
            </script>
      </head>
      <body>
            <table border="0" cellpadding="0" cellspacing="0">
                  <thead>
                        <tr>
                              <th>NUMBER</th>
                              <th colspan="2">MOVE</th>
                        </tr>
                  </thead>
                  <tbody id="tblBody"></tbody>
            </table>
      </body>
</html>