Question

我是javascript编程的新手。这是一个添加记录的代码，保存并编辑它。还删除表的行。我面临2个问题： 1.无法编辑记录 2.如果删除该行，它将被删除，但刷新会将整个记录恢复。

＆＃13;

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);

＆＃13;

<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>

＆＃13;

Answer 1

对于删除错误，您只需添加：

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

在调用函数save（）之前，我试了一下，它应该正常工作：

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

然后，对于您的编辑错误，当您获得变量cid时，您做错了什么：cid=$(this).closest("tr").attr('id');属性'id'不存在，您应该尝试使用.index()，例如示例juste之前。

Chrome显示未捕获的TypeError：无法读取属性＆＃39; cells＆＃39;在HTMLButtonElement中未定义。<anonymous>

1 个答案: