克隆表中的一行而不会破坏该行中的按钮

Question

I'm a beginner currently trying to learn how to code, and my current project is to renovate a website. The website needs a table with an inbuilt save/edit function, which I have already implemented, but it also needs an "add new row" function which I can't seem to get to work. Does anyone know how I might be able to clone a row in my table, whilst keeping the button functional? a previous attempt managed to clone the row, but the button broke. Does anyone have a solution to this problem?

Here is the code i'm currently working with in fiddle:

HTML:

  <table id="tableone" border="2" cellspacing="2" cellpadding="2">
  <thead>
  <tr>
  <th class="col1">Seminar Name</th>
  <th class="col2">Seminar Date</th>
  <th class="col3">Download Link</th>
  <tbody>
  <tr class="del">
  <td contenteditable="false"></td>
  <td contenteditable="false"></td>
  <td contenteditable="false"></td>
  <td>
  <button class="editbtn">Edit</button>
  </td>
  </tr>
  <tr class="del" id="tablerow">
  <td contenteditable="false"></td>
  <td contenteditable="false"></td>
  <td contenteditable="false"></td>
  <td>
  <button class="editbtn">Edit</button>
  </td>
  </tr>
  </tbody>
  <button class="addnewrow">Add New Row</button>

JAVASCRIPT: Frameworks/extensions: jQuery 1.11.0

$('.editbtn').click(function() {
var $this = $(this);
var tds = $this.closest('tr').find('td').filter(function() {
return $(this).find('.editbtn').length === 0;
});
if ($this.html() === 'Edit') {
$this.html('Save');
tds.prop('contenteditable', true);
} else {
$this.html('Edit');
tds.prop('contenteditable', false);
}
});
$('.addnewrow').click(function() {
var $tr = $(this).closest('tr');
var $clone = $tr.clone();
$clone.find('input').val('');
$tr.after($clone);
});

Note: for some reason, the button to clone the previous row just stopped working altogether, and the code for the new row seems to have broken the "save" and "edit" code. Additionally, would it be possible to hide the "save" and "edit" buttons so that only people with admin perms can see/interact with them?

Answer 1

Here is the fixed code add new row will copy your last row and append it to the table.To solve your problem just bind the click event using document. Even on click might not work sometimes but this will always do.

 $(document).on("click",".editbtn",function() { console.log("Edit called"); var $this = $(this); var tds = $this.closest('tr').find('td').filter(function() { return $(this).find('.editbtn').length === 0; }); if ($this.html() === 'Edit') { $this.html('Save'); tds.prop('contenteditable', true); } else { $this.html('Edit'); tds.prop('contenteditable', false); } }); $('.addnewrow').click(function() { var $tr = $("#tableone").find("tr:last"); var $clone = $tr.clone(); $clone.find('input').val(''); $tr.after($clone); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableone" border="2" cellspacing="2" cellpadding="2"> <thead> <tr> <th class="col1">Seminar Name</th> <th class="col2">Seminar Date</th> <th class="col3">Download Link</th> <tbody> <tr class="del"> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false"></td> <td> <button class="editbtn">Edit</button> </td> </tr> <tr class="del" id="tablerow"> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false"></td> <td> <button class="editbtn">Edit</button> </td> </tr> </tbody> <button class="addnewrow">Add New Row</button> 

Answer 2

Maybe you want to clone the button and it's click event and callback，so you should use the event proxy，your code doesn't work：

$('.editbtn').click(function() {});

instead modify to:

$('#tableone').on('click', '.editbtn', function() {});

and last modify the .addnewrow :

var $tr = $("#tableone").find("tr:last");

 $('#tableone').on('click', '.editbtn', function() { var $this = $(this); var tds = $this.closest('tr').find('td').filter(function() { return $(this).find('.editbtn').length === 0; }); if ($this.html() === 'Edit') { $this.html('Save'); tds.prop('contenteditable', true); } else { $this.html('Edit'); tds.prop('contenteditable', false); } }); $('.addnewrow').click(function() { var $tr = $("#tableone").find("tr:last"); var $clone = $tr.clone(); $clone.find('input').val(''); $tr.after($clone); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id="tableone" border="2" cellspacing="2" cellpadding="2"> <thead> <tr> <th class="col1">Seminar Name</th> <th class="col2">Seminar Date</th> <th class="col3">Download Link</th> </thead> <tbody> <tr class="del"> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false"></td> <td> <button class="editbtn">Edit</button> </td> </tr> <tr class="del" id="tablerow"> <td contenteditable="false"></td> <td contenteditable="false"></td> <td contenteditable="false"></td> <td> <button class="editbtn">Edit</button> </td> </tr> </tbody> <button class="addnewrow">Add New Row</button>