Question

我是jquery和javascript的新手。我需要帮助的最后一个功能是，单击“编辑”按钮后，您可以更新两个文本框并保存它，但是我需要它来显示放置它的表行的更新后的行，而不是在更新它并显示在它的底部时桌子。这是我的代码的样子。谢谢。

times<- c(1410, 1411, 1412, ..., 1604)
names <- rep("", length(times))

for(i in 1: length(times)){
  names[i] <- paste("sub", as.character(times[i]), 
                    "file", sep="")
}

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() {
  $(".delete").click(function() {
    remove(this);
  });

  $(".edit").click(function() {
    var $this = $(this);
    var tds = $this.closest('tr').find('td').filter(function() {
      return $(this).find('.edit').length === 0;
    });
    if ($this.html() === 'edit') {
      $this.html('save');
      tds.prop('contenteditable', true);
    } else {
      $this.html('edit');
      tds.prop('contenteditable', false);
    }

    edit(this);
  });

  $("#button").click(function() {
    var name = $("#name").val();
    var course = $("#course").val();

    if ($("tbody").find("tr#nomore").length > 0) {
      $("tbody").html("");
    }

    $("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").click(function() {});
    $(".delete").click(function() {
      remove(this);
    });

    $(".edit").click(function() {});
    $(".edit").click(function() {
      edit(this);
    });
  });
});

Answer 1

这样的事情

https://jsfiddle.net/e864uvn7/

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

   $('.edit').click(function() {
     row = $(this).closest('tr');
     $('#a').val(row.find('td:eq(0)').text())
     $('#b').val(row.find('td:eq(1)').text())
   });

   $('#submit').click(function() {
     if (row) {
       row.find('td:eq(0)').text($('#a').val());
       row.find('td:eq(1)').text($('#b').val());
       $('#a').val('');
       $('#b').val('');
     }
   })


 });

按下编辑按钮时更新行并保存在jquery中

1 个答案: