Reputation: 113
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);
}
Upvotes: 0
Views: 116
Reputation: 1524
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>
Upvotes: 0
Reputation: 148
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
Upvotes: 1