从表中删除一行

Question

I am trying to remove a row from a html table using javascript. I know their is a function DOM function that deletes the row but I have my table in a form so when i delete the row it deletes the form to so my buttons do not work. Any ideas to solve this problem?

`

<table style="width:100%" id = "table" >
  <tr>
    <th>Ticket number</th>
    <th>Class</th>
    <th>Meal</th>
    <th>Seat Number</th>
    <th>Price</th>

  </tr>
  <%while(r.next()){ %>
  <tr>
    <td align="center"><form method="post" action="/AirportServer/html/Purchased.jsp">
    <input type="radio" name="Flight-Num" value = "<%=r.getString("ticket_unique_num") %>">
    <%=r.getString("ticket_unique_num") %> </td>
    <td align="center"><%=r.getString("class")%></td>
    <td align="center"><%=r.getString("meal") %></td>
     <td align="center"><%=r.getString("seat_number") %></td>
      <td align="center"><%=r.getString("fare") %></td>
     </tr>
    <%} %>
    <button type="submit">Reserve Ticket</button> 
</form>
</table>
<button onclick="filter()">Sort By low to High</button>

function filter(){

    var x = document.getElementById("table");
    x.deleteRow(1);

}

Answer 1

You should try and change the id from table to something that is unique. Specifically change the following lines: <table style="width:100%" id = "table" > and update this one to reflect the previous snippet getElementById("table")

One other thing you should try, is to close the form tag after the table tag

Answer 2

You can place your <form> outside of the <table> and refer to it using the form="" attribute on your inputs.

<form name="myForm" action="/foo" method="POST"></form>

<table>
    <tr>
        <input type="text" form="myForm">
    </tr>
</table>

<button type="submit" form="myForm">Submit</button>