Question

我是初学者，目前正在尝试学习如何编码，而我目前的项目是翻新网站。该网站需要一个内置保存/编辑功能的表，我已经实现了，但它还需要一个“添加新行”功能，我似乎无法开始工作。有谁知道我怎么能够在我的表中克隆一行，同时保持按钮功能？之前的尝试设法克隆了行，但按钮坏了。有没有人有这个问题的解决方案？

以下是我目前正在使用的代码：

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：框架/扩展：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);
});

注意：由于某种原因，克隆上一行的按钮刚刚停止工作，新行的代码似乎打破了“保存”和“编辑”代码。此外，是否可以隐藏“保存”和“编辑”按钮，以便只有拥有管理员权限的人才能看到/与他们互动？

Answer 1

这是固定代码添加新行将复制您的最后一行并将其附加到表。要解决您的问题，只需使用文档绑定click事件。即使点击也可能不会有效，但这总是会有效。

＆＃13;

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

＆＃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>
  <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 2

也许你想要克隆按钮及其点击事件和回调，所以你应该使用事件代理，你的代码不起作用：

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

而是修改为：

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

并最后修改.addnewrow：

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

＆＃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;

在不破坏行中的按钮的情况下克隆表中的行

2 个答案: