为什么它会继续复制我要更新的当前行？

时间：2018-07-06 19:44:56

标签： javascript jquery html

因此，我在上次发布的代码中遇到了另一个问题：它一直在复制我要更新的当前行。更新该行的代码很好，它位于所有行下方的同一位置，但是唯一的问题是它复制了我要更新的当前行。这是我的最后一个问题，我的代码已完成。希望大家能帮助我。

function remove(deletelink) {
  $(deletelink).closest("tr").remove();
  
  if ($("tbody").find("tr").length == 0) {
    $("tbody").append("<tr id='nomore'><td colspan='4'>No more records.</td></tr>");
  }
  
  return false;
}

function edit(editlink) {
  var name = $(editlink).closest("tr").find("td.name").text();
  var course = $(editlink).closest("tr").find("td.course").text();

  $("#name").val(name);
  $("#course").val(course);
  $("#button").val("SAVE");
}

$(document).ready(function() {
  let row = null;

  //DELETE RECORD
  $(".delete").click(function() {
    remove(this);
  });

  //EDIT RECORD				
  $(".edit").click(function() {
    row = $(this).closest('tr');
    $('#name').val(row.find('td:eq(0)').text())
    $('#course').val(row.find('td:eq(1)').text())
    edit(this);
  });


  $("#button").click(function() {
    var name = $("#name").val();
    var course = $("#course").val();

    //REMOVE "NO MRORE RECORDS WHEN ADDING"
    if ($("tbody").find("tr#nomore").length > 0) {
      $("tbody").html("");
    }

    //ADD RECORD
    $("tbody").append("<tr><td class='name'>" + name + "</td><td class='course'>" + course + "</td><td><a href='#' class='edit'>Edit</a></td><td><a href='#' class='delete'>Delete</a></td></tr>");

    //UPDATE RECORD
    if (row) {
      row.find('td:eq(0)').text($('#name').val());
      row.find('td:eq(1)').text($('#course').val());
      $('#name').val('');
      $('#course').val('');
    }

    //DELETE THE NEWLY UPDATED RECORD
    $(".delete").click(function() {});
    $(".delete").click(function() {
      remove(this);
    });

    //EDIT RECORD AFTER DELETING
    $(".edit").click(function() {});
    $(".edit").click(function() {
      edit(this);
    });
  });
});
<!DOCTYPE html>
<html>

<head>
  <title>Sample jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <input type="text" id="name" placeholder="Name" />
  <input type="text" id="course" placeholder="Course" />
  <input type="button" id="button" value="ADD" />
  <br /><br />
  <table border="1" cellpadding="3">
    <thead>
      <tr>
        <th>Name</th>
        <th>Course</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="name">Joaquin</td>
        <td class="course">BSIT</td>
        <td>
          <a href="#" class="edit">Edit</a>
        </td>
        <td>
          <a href="#" class="delete">Delete</a>
        </td>
      </tr>
      <tr>
        <td class="name">Jump</td>
        <td class="course">BSIT</td>
        <td>
          <a href="#" class="edit">Edit</a>
        </td>
        <td>
          <a href="#" class="delete">Delete</a>
        </td>
      </tr>
      <tr>
        <td class="name">Ersan</td>
        <td class="course">BSHRM</td>
        <td>
          <a href="#" class="edit">Edit</a>
        </td>
        <td>
          <a href="#" class="delete">Delete</a>
        </td>
      </tr>
      <tr>
        <td class="name">Laree</td>
        <td class="course">BSIT</td>
        <td>
          <a href="#" class="edit">Edit</a>
        </td>
        <td>
          <a href="#" class="delete">Delete</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

3 个答案:

答案 0 :(得分：1)

如果记录将要更新，则无需将其添加到表中。

修改后的代码： 

//UPDATE RECORD
if (row) {
  row.find('td:eq(0)').text($('#name').val());
  row.find('td:eq(1)').text($('#course').val());
  $('#name').val('');
  $('#course').val('');
}
else
{
//ADD RECORD
    $("tbody").append("<tr><td class='name'>" + name + "</td><td class='course'>" + course + "</td><td><a href='#' class='edit'>Edit</a></td><td><a href='#' class='delete'>Delete</a></td></tr>");
 }

完整代码： 

function remove(deletelink) {
  $(deletelink).closest("tr").remove();
  
  if ($("tbody").find("tr").length == 0) {
    $("tbody").append("<tr id='nomore'><td colspan='4'>No more records.</td></tr>");
  }
  
  return false;
}

function edit(editlink) {
  var name = $(editlink).closest("tr").find("td.name").text();
  var course = $(editlink).closest("tr").find("td.course").text();

  $("#name").val(name);
  $("#course").val(course);
  $("#button").val("SAVE");
}

$(document).ready(function() {
  let row = null;

  //DELETE RECORD
  $(".delete").click(function() {
    remove(this);
  });

  //EDIT RECORD				
  $(".edit").click(function() {
    row = $(this).closest('tr');
    $('#name').val(row.find('td:eq(0)').text())
    $('#course').val(row.find('td:eq(1)').text())
    edit(this);
  });


  $("#button").click(function() {
    var name = $("#name").val();
    var course = $("#course").val();

    //REMOVE "NO MRORE RECORDS WHEN ADDING"
    if ($("tbody").find("tr#nomore").length > 0) {
      $("tbody").html("");
    }

    //UPDATE RECORD
    if (row) {
      row.find('td:eq(0)').text($('#name').val());
      row.find('td:eq(1)').text($('#course').val());
      $('#name').val('');
      $('#course').val('');
    }
else
{
    //ADD RECORD
    $("tbody").append("<tr><td class='name'>" + name + "</td><td class='course'>" + course + "</td><td><a href='#' class='edit'>Edit</a></td><td><a href='#' class='delete'>Delete</a></td></tr>");
}

    //DELETE THE NEWLY UPDATED RECORD
    $(".delete").click(function() {});
    $(".delete").click(function() {
      remove(this);
    });

    //EDIT RECORD AFTER DELETING
    $(".edit").click(function() {});
    $(".edit").click(function() {
      edit(this);
    });
  });
});
<!DOCTYPE html>
<html>

<head>
  <title>Sample jQuery</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
  <input type="text" id="name" placeholder="Name" />
  <input type="text" id="course" placeholder="Course" />
  <input type="button" id="button" value="ADD" />
  <br /><br />
  <table border="1" cellpadding="3">
    <thead>
      <tr>
        <th>Name</th>
        <th>Course</th>
        <th></th>
        <th></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td class="name">Joaquin</td>
        <td class="course">BSIT</td>
        <td>
          <a href="#" class="edit">Edit</a>
        </td>
        <td>
          <a href="#" class="delete">Delete</a>
        </td>
      </tr>
      <tr>
        <td class="name">Jump</td>
        <td class="course">BSIT</td>
        <td>
          <a href="#" class="edit">Edit</a>
        </td>
        <td>
          <a href="#" class="delete">Delete</a>
        </td>
      </tr>
      <tr>
        <td class="name">Ersan</td>
        <td class="course">BSHRM</td>
        <td>
          <a href="#" class="edit">Edit</a>
        </td>
        <td>
          <a href="#" class="delete">Delete</a>
        </td>
      </tr>
      <tr>
        <td class="name">Laree</td>
        <td class="course">BSIT</td>
        <td>
          <a href="#" class="edit">Edit</a>
        </td>
        <td>
          <a href="#" class="delete">Delete</a>
        </td>
      </tr>
    </tbody>
  </table>
</body>

</html>

答案 1 :(得分：1)

您正在使用同一按钮进行添加和更新。更新时，它将调用您不想执行的附加部分：

 //ADD RECORD
    $("tbody").append("<tr><td class='name'>" + name + "</td><td class='course'>" + course + "</td><td><a href='#' class='edit'>Edit</a></td><td><a href='#' class='delete'>Delete</a></td></tr>");

在此附加操作之前，您需要检查是否要添加或编辑。

答案 2 :(得分：1)

您得到重复是因为您的保存操作中有一个追加

//ADD RECORD
$("tbody").append("<tr><td class='name'>" + name + "</td><td class='course'>" + course + "</td><td><a href='#' class='edit'>Edit</a></td><td><a href='#' class='delete'>Delete</a></td></tr>");

使用您设置的row变量作为if条件，以查看是否应添加或编辑

if(!row){
  $("tbody").append("<tr><td class='name'>" + name + "</td><td class='course'>" + course + "</td><td><a href='#' class='edit'>Edit</a></td><td><a href='#' class='delete'>Delete</a></td></tr>");
} else {
  row.find('td:eq(0)').text($('#name').val());
  row.find('td:eq(1)').text($('#course').val());
  $('#name').val('');
  $('#course').val('');
  //set row back to null
  row=null;    
}

每次单击“保存”时，您还将为所有行创建新的单击处理程序，而不仅仅是在新行中添加新的单击处理程序。单击将导致重复的事件调用。使用事件委托，您只需设置一次点击处理程序即可：

$("table").on('click','.delete',function() {
  remove(this);
});

//EDIT RECORD               
$("table").on('click','.edit',function() {
  row = $(this).closest('tr');
  $('#name').val(row.find('td:eq(0)').text())
  $('#course').val(row.find('td:eq(1)').text())
  edit(this);
});
相关问题
最新问题