CRUD Operation on List in SharePoint using JQuery and SPServices

I will demonstrate a simple CRUD operation on List with help of JQuery, SPServices and Script Editor built in web part.

So let’s get started.

1. Create custom list name Employee.
   
   
2. Rename Title to First Name and create three another single line of text column Last Name, Position, Location.
   
   
   
   
3. Download JQuery library from here.
   
   Download SPServices library from here.
   
   Open your Site Assets Library or create any other Document Library and add JQuery and SPServices Library.
   
   
   
   
4. Add Script Editor Web Part to your site page,
   
   Gear Box -> Edit page -> INSERT -> Web Part -> Media and Content -> Script Editor -> Add.
   
   
   
   
5. Add JQuery and SPServices References to Script Editor,
   
   1. <src =” http:// yoursite /SiteAssets/jquery.SPServices-2014.02.min.js”></src>
   2. <src =” http://yoursite/SiteAssets/jquery-1.12.2.js”></src>
6. Add below Code in Script Editor.
   
   1. <src=” http:// yoursite /SiteAssets/jquery.SPServices-2014.02.min.js”></src>
   2. <src=” http://yoursite/SiteAssets/jquery-1.12.2.js”></src>
   3. <script>
   4. var v1, v2, v3, v4, itemid;
   5. $(document).ready(function()
   6. {
   7. read();
   8. createItem();
   9. updateItem();
   10. DeleteListItem();
   11. });
   13. function read()
   14. {
   15. $().SPServices(
   16. {
   17. operation: "GetListItems",
   18. async: false,
   19. webURL: "http://srt-it-test-615/sites/testing/",
   20. listName: "Employee",
   21. CAMLViewFields: "<ViewFields>" + "<FieldRef Name=\'Title\' />" + "<FieldRef Name=\'Last_x0020_Name\' />" + "<FieldRef Name=\'Position\' />" + "<FieldRef Name=\'Location\' />" + "</ViewFields>",
   22. completefunc: function(xData, Status)
   23. {
   24. $(xData.responseXML).SPFilterNode("z:row").each(function()
   25. {
   26. varFirstName = $(this).attr("ows_Title");
   27. varLastName = $(this).attr("ows_Last_x0020_Name");
   28. var Position = $(this).attr("ows_Position");
   29. var Location = $(this).attr("ows_Location");
   30. var id = $(this).attr("ows_ID");
   31. vartbldata = "<tr><td><input type='radio' class='addcls' name='rd1' value='" + id + "' onclick='javascript:getcheked();' /></td><td >" + FirstName + "</td><td>" + LastName + "</td><td>" + Position + "</td><td>" + Location + "</td></tr>"
   32. $("#tbl1").append(tbldata);
   33. });
   34. }
   35. });
   36. }
   37. functioncreateItem()
   38. {
   39. $("#btn-add").click(function()
   40. {
   41. varFirstName = $("#FirstName").val();
   42. varLastName = $("#LastName").val();
   43. var Position = $("#Position").val();
   44. var Location = $("#Location").val();
   45. $().SPServices(
   46. {
   47. operation: "UpdateListItems",
   48. async: false,
   49. webURL: "http://srt-it-test-615/sites/testing/",
   50. batchCmd: "New",
   51. listName: "Employee",
   52. valuepairs: [
   53. ["Title", FirstName],
   54. ["Last_x0020_Name", LastName],
   55. ["Position", Position],
   56. ["Location", Location]
   57. ],
   58. completefunc: function(xData, Status)
   59. {
   60. alert("Saved Successfully");
   61. }
   62. });
   63. });
   64. }
   65. functionupdateItem()
   66. {
   67. $("#btnUpdate").click(function()
   68. {
   69. $().SPServices(
   70. {
   71. operation: "UpdateListItems",
   72. webURL: "http://srt-it-test-615/sites/testing/",
   73. async: false,
   74. batchCmd: "Update",
   75. ID: itemid,
   76. listName: "Employee",
   77. valuepairs: [
   78. ["Title", v1],
   79. ["Last_x0020_Name", v2],
   80. ["Position", v3],
   81. ["Location", v4]
   82. ],
   83. completefunc: function(xData, status)
   84. {
   85. alert("Updated Successfully");
   86. }
   87. });
   88. });
   89. }
   90. functionDeleteListItem()
   91. {
   92. $("#btndelete").click(function()
   93. {
   94. console.log(itemid);
   95. $().SPServices(
   96. {
   97. operation: "UpdateListItems",
   98. async: false,
   99. webURL: "http://srt-it-test-615/sites/testing/",
   100. batchCmd: "Delete",
   101. listName: "Employee",
   102. ID: itemid,
   103. completefunc: function(xData, Status)
   104. {
   105. alert("Item Deleted");
   106. }
   107. });
   108. });
   109. }
   110. functiongetcheked()
   111. {
   112. $(".addcls").each(function()
   113. {
   114. if ($(this).is(":checked"))
   115. {
   116. varchkdata = $(this).val();
   117. $("#hdndata").val(chkdata);
   118. itemid = $("#hdndata").val();
   119. var $row = $(this).closest("tr"), // Finds the closest row <tr>
   120. $tds2 = $row.find("td:nth-child(2)");
   121. $tds2.prop("contentEditable", "true");
   122. $tds2.keyup(function()
   123. {
   124. v1 = $(this).text();
   125. v2 = $($tds3).text();
   126. v3 = $($tds4).text();
   127. v4 = $($tds5).text();
   128. });
   129. $tds3 = $row.find("td:nth-child(3)")
   130. $tds3.prop("contentEditable", "true");
   131. $tds3.keyup(function()
   132. {
   133. v2 = $(this).text();
   134. v1 = $($tds2).text();
   135. v3 = $($tds4).text();
   136. v4 = $($tds5).text();
   137. });
   138. $tds4 = $row.find("td:nth-child(4)");
   139. $tds4.prop("contentEditable", "true");
   140. $tds4.keyup(function()
   141. {
   142. v3 = $(this).text();
   143. v2 = $($tds3).text();
   144. v1 = $($tds2).text();
   145. v4 = $($tds5).text();
   146. });
   147. $tds5 = $row.find("td:nth-child(5)");
   148. $tds5.prop("contentEditable", "true");
   149. $tds5.keyup(function()
   150. {
   151. v4 = $(this).text();
   152. v3 = $($tds4).text();
   153. v2 = $($tds3).text();
   154. v1 = $($tds2).text();
   155. });
   156. }
   157. })
   158. }
   159. </script>
   160. <div id="createData">
   161. <table>
   162. <tr>
   163. <td>
   164. <table>
   165. <tr>
   166. <td>First Name</td>
   167. <td> <input type="text" id="FirstName" /> </td>
   168. </tr>
   169. <tr>
   170. <td>Last Name</td>
   171. <td> <input type="text" id="LastName" /> </td>
   172. </tr>
   173. <tr>
   174. <td>Position</td>
   175. <td> <input type="text" id="Position" /> </td>
   176. </tr>
   177. <tr>
   178. <td>Location</td>
   179. <td> <input type="text" id="Location" /> </td>
   180. </tr>
   181. <tr>
   182. <td> <button value="Add" id="btn-add">Add</button> </td>
   183. </tr>
   184. </table>
   185. </td>
   186. </tr>
   187. </table>
   188. </div>
   189. <div id="readData">
   190. <div id="tbldatamain">
   191. <table id=tbl1>
   192. <tr>
   193. <th></th>
   194. <th>First Name</th>
   195. <th>FLast Name</th>
   196. <th>Position</th>
   197. <th>Location</th>
   198. </tr>
   199. </table>
   200. </div> <input type="hidden" id="hdndata" value="" />
   201. <div>
   202. <table>
   203. <tr>
   204. <td><button id="btnUpdate">Update</button></td>
   205. <td><button id="btndelete">Delete</button></td>
   206. </tr>
   207. </div>
   208. </div>
7. Check In and Publish the draft.
   
   
8. Your page will look like this.
   
   
   
9. To create Item Fill First Name, Last Name, Position and Location and Click Add.
   
   
   
   
10. To Update Click on Radio button. Modify Item and click Update Button.
    
    
11. To Delete Record, Click on Radio button and click Delete Button.