title: Update the Html Table Data without using database in jquery
body: <p>I Have a Html table .What i am trying to do is without using database.Perform the crud operation.I am able to doing adding the data to html table and deleting the data fine.But i am not able to the update operation.When I click on the edit button on the html table getting data.How to assign That data into textboxes and do the update based on index.Is there any way to do it.Please Anybody Help.Thanks in Advance.</p>
  
  <h2>Jquery code for adding and deleting the row</h2>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> 
  
     $(function() {
          $('.plusdiv #adddata').on('click', function() {
  
              var orgname, from, todate, capacity, orgid;
              orgid = $("#orgid").val();
              orgname = $("#orgname").val();
              from = $("#fromdt").val();
              todate = $("#todt").val();
              capacity = $("#cpcty").val();
  
             
              
              var edit = "&lt;a class='editedu' href='#'&gt;&lt;i class='fa fa-edit fa-2x'&gt;&lt;/i&gt;&lt;/a&gt;";
              var del = "&lt;a class='deleteedu' href='#'&gt;&lt;i class='fa fa-remove fa-2x'&gt;&lt;/i&gt;&lt;/a&gt;";
  
              if (orgname == "" || from == "" || todate == "") {
                  alert("Fields should not be empty");
              } else {
                  var table = "&lt;tr&gt;&lt;td&gt;" + orgname + "&lt;/td&gt;&lt;td&gt;" + from + "&lt;/td&gt;&lt;td&gt;" + todate + "&lt;/td&gt;&lt;td&gt;" + capacity + "&lt;/td&gt;&lt;td&gt;" + edit + "&lt;/td&gt;&lt;td&gt;" + del + "&lt;/td&gt;&lt;/tr&gt;";
                  $("#tableexp").append(table);
              }
              orgid = $("#orgid").val("");
              orgname = $("#orgname").val("");
              from = $("#fromdt").val("");
              todate = $("#todt").val("");
              capacity = $("#cpcty").val("");
          });
      });
  
      $(function() {
          $("#tableexp").on("click", ".deleteedu", function(e) {
              if (confirm("Are you sure want to delete")) {
                  $(this).closest('tr').remove();
              } else {
                  e.preventDefault();
              }
          });
      });
  
      $(function() {
          $('.crossdiv #cleardata').on('click', function() {
              $("#orgid").val("");
              $("#orgname").val("");
              $("#fromdt").val("");
              $("#todt").val("");
              $("#cpcty").val("");
          });
      });
  
      $(function() {
          var  row, td;
          $("#tableexp").on("click", ".editedu", function(e) {
              row = $(this).closest('tr');
              td = row.find("td");
              $.each(td, function() {
     //i am getting the td data how to assign data to textboxes and do update
                  console.log($(this).html());
              });
             
  
          });
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>CSS code For Table
  ---------------------------
     
  
   #tableexp th,td{
              text-align:center;
              font-size:17px;
              border-collapse: collapse;
           }
  
      #tableexp{
        box-sizing:border-box;
      }
  
      #tableexp th{
      font-size: 17px;
      border-bottom:1px solid black;
      border-right:1px solid black;
      }
  
      #tableexp tr:nth-child(odd){
      background-color: #dddddd;
      }
  
  
  HTML Code
  -----------------------------</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code> 
  
     &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" /&gt;
  
      &lt;div id="a8" style="float:left;width:100%;margin:5px 0px 10px 10px;text-align:left;font-size:17px;"&gt;
          &lt;div class="yopdiv" style="float:left;width:10.5%;font-size:16px;margin-top:3px;font-family:arial;"&gt;
              &lt;label&gt;Organisation&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="org" style="float:left;width:24%;"&gt;
              &lt;input style="display:none;" id="orgid" type="text" name="orgid" value="1" /&gt;
              &lt;input type="text" name="organisation" id="orgname" style="width:95%;height:20px;font-size:17px;" value="" required/&gt;
          &lt;/div&gt;
          &lt;div class="formlbl" style="float:left;width:5.5%;font-size:16px;margin-top:3px;font-family:arial;"&gt;
              &lt;label&gt;From &lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="formtxt" style="float:left;width:10%;"&gt;
              &lt;input type="text" id="fromdt" name="fromdate" maxlength="10" style="width:95%;height:20px;font-size:15px;" value="" /&gt;
          &lt;/div&gt;
          &lt;div class="tolbl" style="float:left;width:4%;font-size:16px;margin:3px 0px 0 15px;font-family:arial;"&gt;
              &lt;label&gt;To&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="totxt" style="float:left;width:10%;font-size:18px;"&gt;
              &lt;input type="text" name="todate" id="todt" value="" style="width:90%;height:20px;font-size:17px;" /&gt;
          &lt;/div&gt;
          &lt;div class="cpctylbl" style="float:left;width:6%;font-size:16px;margin:3px 0px 0 15px;font-family:arial;"&gt;
              &lt;label&gt;Capacity&lt;/label&gt;
          &lt;/div&gt;
          &lt;div class="cptxt" style="float:left;width:16%;font-size:18px;"&gt;
              &lt;input type="text" name="capacity" id="cpcty" value="" style="width:97%;height:20px;font-size:17px;" /&gt;
          &lt;/div&gt;
  
          &lt;div class="plusdiv" style="float:left;width:3%;margin-left:-2px;padding-left:20px;"&gt;
              &lt;a id='adddata' href="#"&gt;&lt;i class="fa fa-plus" style="width:70%;font-size:25px;color:white;background-color:#dc143c;padding-left:2px;"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
          &lt;div class="crossdiv" style="float:left;width:5%;padding-left:10px;"&gt;
              &lt;a id='cleardata' href="#"&gt;&lt;i class="fa fa-remove" style="width:50%;font-size:25px;color:white;background-color:#dc143c;padding-left:4px;"&gt;&lt;/i&gt;&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="exptable" class="expdiv" style="max-height:140px;overflow: auto; width:100%;"&gt;
          &lt;table cellspacing="0" style="width:100%;" cellpadding="0" id=tableexp&gt;
              &lt;thead&gt;
                  &lt;tr&gt;
                      &lt;th style="width:25%;"&gt;Organisation&lt;/th&gt;
                      &lt;th style="width:20%;"&gt;From&lt;/th&gt;
                      &lt;th style="width:13%;"&gt;To&lt;/th&gt;
                      &lt;th style="width:20%;"&gt;Capacity&lt;/th&gt;
                      &lt;th style="width:5%;"&gt;Edit&lt;/th&gt;
                      &lt;th style="width:5%;"&gt;Delete&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody&gt;
  
              &lt;/tbody&gt;
  
          &lt;/table&gt;
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>