How to give unique row id to rows in display tag table?

I am using display tag to show user list on my JSP. I have a delete button in each row to delete the particular row/ user from the list. For this I am using ajax.

The user is getting deleted from the database using ajax. But since I am using ajax. Untill I refresh the page the user is still there in the display tag list.

Is there any way i can delete the row from display table using javascript?

As far as I think row can be delted from table using javascript but you need to know row id at least.

So, how do I give unique row ids to each row in the display table?

please help.

Below is my code

<display:table name="employeeUpdateList" pagesize="50" 
    class="listingTable" keepStatus="true" cellpadding="0px"
    cellspacing="0px" id="employeeUpdate" export="true" requestURI="">
    <display:setProperty name="export.decorated" value="true" />
    <display:setProperty name="export.excel.filename"
        value="Employee Update List.xls" />
    <display:column title="What is changed" property="columnName"></display:column>
    <display:column title="From" property="oldValue"></display:column>
    <display:column title="To" property="newValue"></display:column>
    <display:column title="Effective Date">
        <fmt:formatDate value="${employeeUpdate.effectiveDate}"
            pattern="dd MMMM yyyy" />
    </display:column>
    <display:column title="Changed By" property="changedBy.fullname"></display:column>
    <display:column title="Changed On">
        <fmt:formatDate value="${employeeUpdate.changedOn }"
            pattern="dd MMMM yyyy hh:mm:ss" />
    </display:column>
    <display:column media="html"
        style="text-align :center!important;padding:0px!important">
        <input class="input-button-small" type="button"
            value="<spring:message code='button.delete' />"
            onclick="deleteEmployeeUpdate('${deleteEmployeeUpdateUrl}','${employeeUpdate.id}')" />
    </display:column>
    <display:setProperty name="paging.banner.item_name"
        value="Employee Update" />
    <display:setProperty name="paging.banner.items_name"
        value="Employee updates " />
</display:table>

Solution

Update - now that you've posted your code, I see you're using DOM0 onclick="..." handlers. I don't recommend doing that (see below, this is a classic use case for doing event delegation — watching for clicks at the table level rather than on individual buttons), but..

You'll want to modify your deleteEmployeeUpdate function to accept another argument, which will be the button that was clicked. So:

onclick="deleteEmployeeUpdate(this, '${deleteEmployeeUpdateUrl}','${employeeUpdate.id}')"

and

function deleteEmployeeUpdate(button, url, id) {
    // ...
}

Then to remove the row containing the button, within that function:

var row = button.parentNode;
while (row && row.tagName.toLowerCase() !== "tr") {
    row = row.parentNode;
}
if (row) {
  row.parentNode.removeChild(row);
}

See below for a solution using event delegation, and below that, some handy reading.

You don't need to give your rows IDs. When you process the click event on the delete button, normally you have a reference to that delete button element as this. It has a parentNode property which is the node (element) that contains it. That's probably a table cell (td). It also has a parentNode property, which is presumably the row (tr), which also has a parent which is usually a tbody, etc.

You can remove a row by calling its parent node's removeChild function and passing in the tr element.

Here's a complete example: Live copy | source

HTML:

<table id="theTable">
  <tbody>
    <tr><td>First row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Second row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Third row</td><td><button class="delete">Delete</button></td></tr>
    <tr><td>Fourth row</td><td><button class="delete">Delete</button></td></tr>
  </tbody>
</table>

JavaScript:

(function() {

  // Get a reference to the table
  var theTable = document.getElementById("theTable");

  // Watch for clicks
  hookEvent(theTable, "click", function(event) {
    var elm, row, tbody;
    elm = event.target
    while (elm && elm.className !== "delete") {
      elm = elm.parentNode;
    }
    if (elm) {
      // It's the delete button, remove this row
      row = elm.parentNode.parentNode; // Parent of button's parent
      tbody = row.parentNode;
      tbody.removeChild(row);
    }
  });

  // === Basic utility functions

  function display(msg) {
    var p = document.createElement('p');
    p.innerHTML = String(msg);
    document.body.appendChild(p);
  }

  function hookEvent(element, eventName, handler) {
    // Very quick-and-dirty, recommend using a proper library,
    // this is just for the purposes of the example.
    if (typeof element.addEventListener !== "undefined") {
      element.addEventListener(eventName, handler, false);
    }
    else if (typeof element.attachEvent !== "undefined") {
      element.attachEvent("on" + eventName, function(event) {
        return handler(event || window.event);
      });
    }
    else {
      throw "Browser not supported.";
    }
  }
})();

Reading:

FWIW, I'd strongly recommend using a good JavaScript library like jQuery, Prototype, YUI, Closure, or any of several others. The example gets dramatically shorter, which shows how you can focus on what you're trying to build rather than mucking about with the details of the low-level DOM API.

For example, the above using jQuery: Live copy | source

HTML:

(No change)

JavaScript:

jQuery(function($) {
  $("#theTable").on("click", "button.delete", function() {
    $(this).closest("tr").remove();
  });
});

That's for jQuery 1.7 and later. If you're using something earlier, you'd use delegate rather than on (note the order of arguments changes):

jQuery(function($) {
  $("#theTable").delegate("button.delete", "click", function() {
    $(this).closest("tr").remove();
  });
});

It would be similarly simple with just about any of the other libraries.