代碼jfiddle但不是在jfiddle結果工作

Question

這裏是我的jsFiddle HTML：

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

的Javascript：

$('#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); 
}); 

代碼工作中jfiddle罰款，但是當我去 https://jsfiddle.net/yT92K/42/show/result 的「添加新行」功能已停止工作。 此外，當我嘗試將文件導出爲單個.html文件時，它只是在我的瀏覽器（chrome）中打開一個空白頁面。有沒有人有這方面的修復？

$('#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>

Answer 1

這是@ zhuravlyoy的答案的補充，因爲如果前一個編輯過，他的回答不會使新行變爲空白。

$(document).ready(function() { 
 
     $('#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.children('.td').empty(); 
 
      $clone.children('.td').attr('contenteditable', false); 
 
      $clone.find('.editbtn').text('Edit'); 
 
      $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" class="td"></td> 
 
      <td contenteditable="false" class="td"></td> 
 
      <td contenteditable="false" class="td"></td> 
 
      <td> 
 
      <button class="editbtn">Edit</button> 
 
      </td> 
 
     </tr> 
 
     <tr class="del" id="tablerow"> 
 
      <td contenteditable="false" class="td"></td> 
 
      <td contenteditable="false" class="td"></td> 
 
      <td contenteditable="false" class="td"></td> 
 
      <td> 
 
      <button class="editbtn">Edit</button> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
     <button class="addnewrow">Add New Row</button>

Answer 2

$(document).ready(function() { 
 
     $('#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(''); 
 
      $clone.find('td:not(:last)').empty(); 
 
      $clone.find('td:not(:last)').prop('contenteditable', false); 
 
      $clone.find('button').html('Edit'); 
 
      $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>

試試這個！