-1

I am new to javascript programming. This is a code to add records save it and edit it. also delete the row of the table. I am face 2 issues.: 1. unable to edit the records 2. if i delete the row, it gets removed but refresh brings the whole record back.

var savedRecordsArray = [];
var count;
var xid=1;

var initialize = function(){
  count=0;
      $("#addButton").on("click",addRecord);
      loadSavedRecords();
  };

var addRecord = function(event){
  //add to ui
  var enteredname=document.getElementById('name').value;
  var e = document.getElementById("gender");
  var enteredgender = e.options[e.selectedIndex].text;

  var bdate=document.getElementById('dater').value;

  var record=[enteredname,enteredgender,bdate];
  showRecord(record);
  xid=xid+1;

  //add to recordSet
  savedRecordsArray.push(record);

  //save to database
  save();
  count++;
  return false;
};

var save = function(){
    $.jStorage.set("table1", savedRecordsArray );
}

var loadSavedRecords = function(){
    savedRecordsArray = $.jStorage.get("table1") || [] ;
    for( let index=0 ; index<savedRecordsArray.length ; ++index ) {
        showRecord( savedRecordsArray[index] );
    }
};


var showRecord = function(record){
  //this line creates a new dom element
  var recordTemplate = $(`<tr><td>${record[0]}</td><td>${record[1]}</td><td>${record[2]}</td><td><button class="clearRow">Delete</button><button class="editRow">Edit</button></td></tr>`);
  $("#table1").append(recordTemplate);
};

$('#table1').on('click', '.clearRow', function(e){
  $(this).closest("tr").remove();
  save();
});

$('#table1').on('click', '.editRow', function(e){
  var cid;
  cid=$(this).closest("tr").attr('id');
  $("#name").val(document.getElementById("table1").rows[cid].cells[1].innerHTML);//error on this line
  $("#dater").val(document.getElementById("table1").rows[cid].cells[2].innerHTML);
  $("#gender").val(document.getElementById("table1").rows[cid].cells[3].innerHTML)

  $(this).closest("tr").remove();
});

$(document).ready(initialize);
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jStorage/0.4.12/jstorage.min.js"></script>

<form>
  <fieldset>
    <legend>Personal Details</legend>
    <table>
      <tr>
        <td>Name :</td> <td><input id="name" type="text" ></input></td><br>
      </tr>
      <tr>
        <td>Gender :</td> 
        <td>
          <select id="gender"><br>
            <option value="1">Male</option>
            <option value="2">Female</option>
          </select>
        </td>
      </tr>
      
      <br>
      <tr>
        <td>Date of birth :</td>
        <td>
          <input id="dater" type="date" name="bday"></input>
        </td>
        
        <br>
        <!-- Here we will have the table -->
      </tr>
      <tr>
        <td><button id="addButton">Add</button></td>
      </tr>
    </table>
  </fieldset>

  <ul id="savedTodos"></ul>
</form>

<fieldset>
  <legend>Entered Details</legend>
  <table id="table1" border="1">
    <tr>
      <th>Name</th>
      <th>Gender</th>
      <th>Date of Birth</th>
      <th>Operations</th>
    </tr>
</table>
</fieldset>
Shiladitya
  • 12,003
  • 15
  • 25
  • 38
Jayaraman Iyer
  • 1
  • 1

1 Answers1

0

For the delete error you should just add :

savedRecordsArray.splice($(this).closest("tr").index(),1);

before the call of the function save(), I tried it, it should be working : 

  $('#table1').on('click', '.clearRow', function(e){
        $(this).closest("tr").remove();
        savedRecordsArray.splice($(this).closest("tr").index(),1);
        save();
    })

Then for your Edit error, you are doing something wrong when you get the variable cid : cid=$(this).closest("tr").attr('id'); The attribute 'id' doesn't exist, you should try something with .index() as in the example juste before.

H. Gybels
  • 147
  • 1
  • 1
  • 11
  • But the `tr` elements don't have `id` attribute in OP's code ... + jQuery object doesn't have `previousElementSibling` method – Teemu Jul 25 '17 at 09:24
  • And something like : `var cid=this.previousSibling; cid = $(cid).closest("tr").attr('id');` ? – H. Gybels Jul 25 '17 at 09:34
  • With the two lines I gave before, you have the row : if you replace `.attr('id')` with `remove()` it deletes the row. So the problem is with the id witch is undefined. – H. Gybels Jul 25 '17 at 09:42
  • Your right sorry I misunderstood it. You may should use `.index(this)` then ? https://stackoverflow.com/questions/1858175/how-to-know-index-of-a-tr-inside-a-table-with-jquery – H. Gybels Jul 25 '17 at 09:52
  • Actually I was wrong with `this`, there's a delegated event handling, and `this` really refers to the clicked button ... The only problem are the missing `id`s. – Teemu Jul 25 '17 at 09:56