使用JavaScript和HTML动态附加行

Question

I have a button that appends a row with some data to an HTML table ("table_id"). In that row, there is a button that I need to take the data from that row (and erase that row) and append it to another table ("table_id_three") further down the page.

I've tried splicing in tag ID's and passing them to the JavaScript functions I have listed but it doesn't work. Can do I do this with plain JavaScript?

HTML:

<table id="table_id" class="table_styles">
    <tr>
    <td class="grid-item-header-two">Assigned To
    </td>
    <td class="grid-item-header-two">From
    </td>
    <td class="grid-item-header-two">To
    </td>
    <td class="grid-item-header-two">Num Passengers
    </td>
    <td class="grid-item-header-two">Time
    </td>
    <td class="grid-item-header-two">No Show
    </td>
    <td class="grid-item-header-two">Edit
    </td>
    <td class="grid-item-header-two">Complete
    </td> 
    </tr>
</table>
<table id="table_id_three" class="table_styles">
    <tr>
    <td class="grid-item-header-three">Assigned To
    </td>
    <td class="grid-item-header-three">From
    </td>
    <td class="grid-item-header-three">To
    </td>
    <td class="grid-item-header-three">Num Passengers
    </td>
    <td class="grid-item-header-three">Time
    </td>
    <td class="grid-item-header-three">No Show
    </td>
    <td class="grid-item-header-three">Edit
    </td>
    <td class="grid-item-header-three">Complete
    </td> 
    </tr>
</table>    

JavaScript:

//appends to first table
function appendData(){      
                    var driver = getDriver();
                    var pickup = getPickup();
                    var dropOff = getDropOff();
                    var numPsngers = getNumPsngers();

                    document.getElementById("table_id").innerHTML += 
                            "<tr id=\"some_id\"><td class=\"grid-item\">  " + driver + 
                            "  </td><td class=\"grid-item\">  " + pickup + 
                            "  </td><td class=\"grid-item\">  " + dropOff + 
                            "  </td><td class=\"grid-item\">  " + numPsngers + 
                            "  </td><td class=\"grid-item\">  7:03:00 PM  " + 
                            "</td>  <td class=\"grid-item\"><input type=\"checkbox\" name=\"noShow\" value=\"showedUp\">" +
                            "</td>  <td class=\"grid-item\"><input type=\"submit\" value=\"Edit\">" +
                            "</td>  <td class=\"grid-item\"><input type=\"submit\" value=\"Complete\" onclick=\"getData()\"></td></tr>";       
            }
//appends to second table
function getData(){
                var x = document.getElementById("some_id").innerHTML;

                var stringArray = x.split("  ");
                var assignedTo = stringArray[1];
                var from = stringArray[3];
                var to = stringArray[5];
                var numPsngers = stringArray[7];
                var time = stringArray[9];

                document.getElementById("some_id").innerHTML = ""; 
                document.getElementById("table_id_three").innerHTML +=
                        "<tr id=\"some_other_id\"><td class=\"grid-item\">  " + assignedTo + 
                            "  </td><td class=\"grid-item\">  " + from + 
                            "  </td><td class=\"grid-item\">  " + to + 
                            "  </td><td class=\"grid-item\">  " + numPsngers + 
                            "  </td><td class=\"grid-item\">  7:03:00 PM  " + 
                            "</td>  <td class=\"grid-item\"><input type=\"checkbox\" name=\"noShow\" value=\"showedUp\">" +
                            "</td>  <td class=\"grid-item\"><input type=\"submit\" value=\"Edit\">" +
                            "</td>  <td class=\"grid-item\"><input type=\"submit\" value=\"Complete\" onclick=\"eraseData()\"></td></tr>";

            }   

Answer 1

HTML:

  <table id="table_id" class="table_styles">
    <tr>
      <td class="grid-item-header-two">Assigned To</td>
      <td class="grid-item-header-two">From</td>
      <td class="grid-item-header-two">To</td>
      <td class="grid-item-header-two">Num Passengers</td>
      <td class="grid-item-header-two">Time</td>
      <td class="grid-item-header-two">No Show</td>
      <td class="grid-item-header-two">Edit</td>
      <td class="grid-item-header-two">Complete</td>
    </tr>
    <tr id="values">
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
      <td>Value</td>
    </tr>
  </table>
  <hr>
  <table id="table_id_three" class="table_styles">
    <tr>
      <td class="grid-item-header-three">Assigned To</td>
      <td class="grid-item-header-three">From</td>
      <td class="grid-item-header-three">To</td>
      <td class="grid-item-header-three">Num Passengers</td>
      <td class="grid-item-header-three">Time</td>
      <td class="grid-item-header-three">No Show</td>
      <td class="grid-item-header-three">Edit</td>
      <td class="grid-item-header-three">Complete</td>
    </tr>
  </table>
  <hr>
  <button id="send" type="submit" onclick="move()">Move</button>

JavaScript:

  function move(){
    var values = document.getElementById("values");
    document.getElementById("table_id_three").appendChild(values);
  }

jQuery:

  $("#send").on("click", function() {
    $("#table_id_three").append($("#values"));
  });