这里是我的jsFiddle HTML:代码jfiddle但不是在jfiddle结果工作
<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>
“添加新行” 按钮不执行任何操作,在实际小提琴要么..? – Teemu
尽管放入代码段时完全相同的代码工作? –
你在这里的代码片段中的jQuery和jsfiddle中的jQuery是不一样的。 –