Delete a table row by an ID which is inside hidden field

问题

I have a table which generates its rows in a while loop as follows in JSP, (I use a hidden field in each row to get the specific ID and POST it to the servlet)

<tr>
    <td><center><%  out.print(rs1.getString("teamid"));%></center><input name="tid" type="hidden" value="<%out.print(rs1.getString("teamid"));%>"/></td>
    <td><center><%  out.print(rs1.getString("teamname"));%></center></td>
    <td><center><%  out.print(rs1.getString("teaminitials"));%></center></td>
    <td><center><%  out.print(rs1.getString("teamdesc"));%></center></td>  
    <td><center><input type="submit" class="greenbutton" name="delete" value="Delete"/></center></td>
</tr>

In the servlet,

String buttondelete = request.getParameter("delete");
    if(buttondelete!=null){
    String tid = request.getParameter("tid");

        try {
            clmmodel_database.updateQuery("delete from clm_team where teamid = '"+tid+"'");
            response.sendRedirect("clmview_teamlist.jsp");
        } catch (Exception e) {
        }

    }

But this deletes always the first row of the table, not the row I need to delete. Please show me where I have done the mistake or suggest me a way.

回答1:

The simplest solution would seem to be to create a form for each element:

<tr>
<td>
Item X
</td>
<td>
<form><input type="hidden" name="id" value="x"/><input type="submit"/></form>
</td>
</tr>

<tr>
<td>
Item Y
</td>
<td>
<form><input type="hidden" name="id" value="y"/><input type="submit"/></form>
</td>
</tr>

回答2:

Problem is

1)delete button name on form is common for all rows.

String buttondelete = request.getParameter("delete"); //button name on form

How do you know which delete button is clicked? There is no identifier.

Solution
I am not providing complete code, but giving you the direction.

There is no need of hidden field.

You can use AJAX and write one javascript function which gets the id and pass to servlet

<input type="button" class="greenbutton" name="delete" value="Delete" id="<%rs1.getString("teamid");%>" onclick="deleteRow(this.id)"/>

Javascript

function deleteRow(clickedId)
{
   //AJAX call here
  //pass this clickedId to Servlet and delete the row , show response back to user 
}

Related link

Ajax Basics pdf and source code is also available.

回答3:

In your rendered HTML table, you will have multiple hidden fields with the same id-attribute:

<form>
    <table>
        <tr>
            <td> <input type="hidden" value="ID_1" id="tid" ... > </td>
            <td> ... </td>
        <tr>
        <tr>
            <td> <input type="hidden" value="ID_2" id="tid" ... > </td>
            <td> ... </td>
        <tr>
        ...
    </table>
</form>

That's valid. When sending the form, all values of tid fields will be sent to the server, as an array. Like: tid = [ "ID_1", "ID_2", ... ]

request.getParameter("tid") will return you the first value of this list. Hence, always the first row will be deleted.

One possible solution is to remove the hidden input field and give your submit buttons, which you have in each row, a different value:

<td> <input type="submit" name="delete" value="<%out.print(rs1.getString("teamid"));%>"/> </td>

Then, the browser will see:

<form>
    <table>
        <tr>
            <td> ... </td>
            <td> <input type="submit" name="delete" value="ID_1"/> </td>
        <tr>
        <tr>
            <td> ... </td>
            <td> <input type="submit" name="delete" value="ID_2"/> </td>
        <tr>
        ...
    </table>
</form>

And, in your servlet, use:

String tid = request.getParameter("delete");

This will give you the right ID.

回答4:

@Dilukshan Mahendra You can try like this, Which is worked for me. All you need to do is enter your table id and anchor tag class(Every row has anchor tag for row, hence use class)

$("#table_name tr td anchor_class").click(function(e) {
// e.preventDefault();
var row = $(this).closest('tr');
var rowid = row.attr('id');
var url = $(this).attr('href');
var ajaxUrl = url.substring(url.lastIndexOf("/") + 1, url.length);
input_box = confirm("Are you sure you want to delete this Record?");
if (input_box == true) {
    // Output when OK is clicked
    // Here you are sending your servlet URL to ajax.
    $.ajax({
        url : ajaxUrl,
        type : "POST",
        async : false,
        success : function() {
            $('#'+rowid).remove();
            alert('Record Deleted');
        }
    });

    return false;
} else {
    // Output when Cancel is clicked
    // alert("Delete cancelled");
    return false;
}
});

And my html table row looks like,

<tr>
   <td>
     <input type="text">
   </td>
   <td>
     <textarea ></textarea>
   </td>
   <td>
     <input class="file1" type="file" value="">
   </td>
   <td>
      <a id="deleteFile2" class="del" href="ur_servlet_url&id=2">Delete</a>
   </td>
</tr>

Hope this helps..

回答5:

use this code to diplay List in the table form:

<tr>
    <td>
        <input type="submit" name="data" value=<%=rs.getString(5)%> />
    </td>
</tr>

Here "rs.getString(5)" is the id. id is a field name/5 is a column index in a table.

In SERVLET/JSP page

String id = request.getParameter("data"); //Store clicked 'submit' value.

Out.println(id);//Use the variable for your SQL.

It worked for me.

来源：https://stackoverflow.com/questions/19535115/delete-a-table-row-by-an-id-which-is-inside-hidden-field

标签

jsp

servlets

html-table