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 ＆＃34;添加新行＆＃34;功能已停止工作。此外，当我尝试将文件导出为单独的.html文件时，它只是在浏览器中打开一个空白页面（chrome）。有人有解决方法吗？

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

试一试！

Answer 2

这是@ 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>

代码在jfiddle中工作但不在jfiddle结果中

2 个答案: