By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,805 Members | 1,202 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,805 IT Pros & Developers. It's quick & easy.

how to edit a value of a cell inside table in jsp

P: 11
I have jsp page which displays a table with passPercentage colum.i have to directly edit the value in passPercentage by clicking on it.how to do that?
Sep 20 '13 #1
Share this Question
Share on Google+
10 Replies


P: 11
Expand|Select|Wrap|Line Numbers
  1. <%@ page language="java" contentType="text/html; 
  2.  
  3. <s:if test="tUserModuleList.size() != 0"> 
  4.  
  5. <h2>List of Users assigned to the Modules</h2>
  6.  
  7.   <table id="table_id" class="display">
  8.   <thead>
  9.     <tr>
  10.         <th>UserName</th>
  11.         <th>ModuleName</th>
  12.         <th><p id="pass" title="click for bulkupdate"> PassPercentage</p> <div  align="center" style="max-width: 3px;">
  13.         <input id="passP" name="passPercentage" type="text" style="display:none;"/></input>
  14.  
  15.         <!--<s:form action="editBulkUpdate">
  16.         <s:property value="passPercentage"/>
  17.  <s:submit value="BulkUpdate" ></s:submit> </s:form> -->
  18.  
  19.  </div> </th>
  20.         <th>Enabled</th>
  21.         <th>DisplayScore?</th>
  22.         <th>Action</th>
  23.         <th>Reports</th>
  24.     </tr>
  25.     </thead>
  26.     <tbody>
  27.     <s:iterator value="tUserModuleList" >
  28.             <tr  >
  29.                 <td><s:property value="TUser.userName"/></td>
  30.                 <td><s:property value="TModule.moduleName"/></td>
  31.                 <td class="pass"><s:property value="passPercentage"/></td>
  32.                 <td><s:property value="enabled"/></td>
  33.                 <td><s:property value="displayScore"/></td>
  34.  
  35.                 <td><s:url action="editUserModule" id="editTag">
  36.                         <s:param name="userModuleId"><s:property value="userModuleId" /></s:param>
  37.                     </s:url>
  38.                      <a href='<s:property value="%{editTag}" />' target="_self" class="roll">
  39.                              <span data-title="Edit">Edit</span></a>
  40.  
  41.                  </td>
  42.                  <td><s:url action="generateReport" id="generate">
  43.                         <s:param name="userModuleId"><s:property value="userModuleId"/></s:param>
  44.                     </s:url>
  45.                      <a href='<s:property value="%{generate}" />' target="_self" class="roll">
  46.                              <span data-title="Report">Report</span></a>        
  47.                  </td>
  48.             </tr>
  49.     </s:iterator>
  50.     </tbody>
  51. </table>
  52. </s:if>
  53. <s:else>
  54. There are no Users with Modules assigned. Please allocate Users with Modules.
  55. </s:else>
  56.  
Sep 20 '13 #2

Dormilich
Expert Mod 5K+
P: 8,639
use contenteditable.

of course that doesn’t save anything you edited.
Sep 20 '13 #3

P: 11
I need to save that data to database what i have edited .
Sep 23 '13 #4

Dormilich
Expert Mod 5K+
P: 8,639
then you need to send that data over to the server.
Sep 23 '13 #5

P: 11
hi i have used jquery jeditable inline editing to just click on value and i am able to edit it.but i am not able to update in data base.do u have any suggestions?
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript">
  2. $(document).ready( function() {
  3.  
  4.     var id = -1;//simulation of id
  5.     $("#table_id").dataTable({ 
  6.                  bJQueryUI: true,
  7.                  "sPaginationType": "full_numbers"
  8. }).makeEditable({
  9.                         sUpdateURL: function(value, settings)
  10.                         {
  11.                                              return(value); //Simulation of server-side response using a callback function
  12.                         },
  13.                              sAddURL: "saveBulkUpdate",
  14.                              sAddHttpMethod: "GET",
  15.                         sDeleteHttpMethod: "GET",
  16.                                     "aoColumns": [ null, null, {},null, null, null, null, null, null]
  17.  
  18. } );
  19. });
  20. </script>
Sep 24 '13 #6

Dormilich
Expert Mod 5K+
P: 8,639
having a look at the DataTables homepage, there is an example how to edit table cells.

other than that:
//Simulation of server-side response using a callback function
hook in there.
Sep 24 '13 #7

P: 11
i have used same code which is present in link .but i am not able to call action class and update data base
Sep 24 '13 #8

Dormilich
Expert Mod 5K+
P: 8,639
i have used same code which is present in link
definitely not. the sample code uses .editable(), while you use .makeEditable() and the option names do not match at all.
Sep 24 '13 #9

P: 11
can u please suggest me how to do same with makeeditable. i tried i can enter value on click of cell but it is not getting updated?
Sep 30 '13 #10

Dormilich
Expert Mod 5K+
P: 8,639
and where would I find the makeEditable plugin?
Sep 30 '13 #11

Post your reply

Sign in to post your reply or Sign up for a free account.