HTML
<table class="example" border="1">
<tr>
<td>
<label>Enter text</label>
<textarea>Enter text</textarea>
</td>
</tr>
<tr class="clone"></tr>
</table>
<p><button id="add-row">Add Row</button></p>
jQuery
$(document).ready(function() {
$(this).on('click', function(event) {
if ( ! $(event.target).closest('table').hasClass('example')) {
$('table label').show();
$('table textarea').hide();
}
});
$('table td').on('click', function() {
$('table label').show();
$('table textarea').hide();
$(this).find('label').hide();
$(this).find('textarea').show();
});
$('#add-row').on('click', function() {
_this = $('table tr.clone')
.clone()
.removeClass('clone')
.insertBefore('.clone');
_this.append('<td><label>Enter text</label><textarea>Enter text</textarea></td>');
});
});
CSS
table textarea {
display: none;
}
table .clone {
display: none;
}
上面的链接解释了我正在尝试做的事情。
基本上问题是这样的。我在td中有一个标签和textarea,textarea是隐藏的,只有标签在开始时显示。当用户单击表格的单元格时,它会隐藏标签并显示textarea,它可以正常工作,直到您尝试添加行的克隆然后它什么也不做。
编辑:忘记提及为什么我要克隆行并在之后添加单元格。在我的实际代码中,我也允许创建列,并计算行数并在之后添加单元格。
非常感谢您的帮助 =)