javascript - 使用 JavaScript 和 HTML 动态附加行

Question

我有一个按钮，可以将包含一些数据的行附加到 HTML 表格(“table_id”)。在那一行中，有一个按钮，我需要从该行中获取数据(并删除该行)并将其附加到页面下方的另一个表(“table_id_three”)。

我试过拼接标记 ID 并将它们传递给我列出的 JavaScript 函数，但它不起作用。我可以使用纯 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"));
  });