我一直在创建一个应用程序,它基于您在一个文本框中输入的数字添加表格。我试图弄清楚每次“Go”按钮被第二次点击后,我生成的以前的表格消失了。到目前为止,我可以添加表格,但他们只是保持克隆。jquery第二次点击删除克隆?
我试着用'看过'的对象删除以前的表,但无法弄清楚如何真正让它处理我的代码。我抬头看.remove,但不知道在我的代码中究竟在哪里工作。
真人版:http://codepen.io/BabinecJ/pen/BRjJbw
$('[name="cand_no" ]').on('change', function() {
// Not checking for Invalid input
if (this.value != '') {
var val = parseInt(this.value, 10);
///Click add button add count number + table
$(function() {
$('#add').bind('click', function() {
$('#mytbody');
var count = $('#mytbody').children('tr').length;
$('#counter').html(count);
///Adding coder name
var name = $("#tname").val();
$('#aname').html(name);
});
});
/// Figuring out way to disable enter key being pressed
$(document).ready(function() {
$('cand_no').keydown(function(event) {
if (event.keyCode == 13) {
event.preventDefault();
return false;
}
});
});
for (var i = 0; i < val; i++) {
// Clone the Template
var $cloned = $('.template tbody').clone();
// For each number added append the template row
$('#studentTable tbody').append($cloned.html());
}
}
var seen = {};
$('a').each(function() {
var txt = $(this).text();
if (seen[txt])
$(this).remove();
else
seen[txt] = true;
});
});
.template {
border-style: solid;
}
#cand_no {
background-color: red;
}
#add {
color: blue;
position: absolute;
margin-left: -900px;
margin-top: -35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<label><strong>Number of Rows</strong></label>
<label><input name="cand_no" type="text" placeholder="Type Number of Rows" id="cand_no" /></label>
<div style="float: right; width: 40px">
<button id="add">GO!</button>
</div>
<div class="clear"></div>
</p>
<p>
<label><strong>Your Name</strong></label>
<label><input name="tname" id="tname" type="text" placeholder="Type Your Name" /></label>
<div class="clear"></div>
</p>
<div class="cand_fields">
<table id="studentTable" "txt" width="630" border="solid">
<tbody id="mytbody">
<tr>
<td>
<p>Number of rows:
<p id="counter">
</span>
</p>
</td>
<td id="tname" width="0">Name
<p id="aname">
</span>
</p>
</td>
</tr>
<tr>
<td><input name="tname" type="text" placeholder="" required="required" id="tname" /></td>
<td><input name="cand_pos" type="text" placeholder="" required="required" /></td>
</tr>
</table>
</div>
<div class="template" id=".template" style="display:none ">
<table>
<tr>
<td><input name="cand_name" type="text" placeholder="" required="required" id="count" /></td>
<td><input name="cand_pos" type="text" placeholder="" required="required" /></td>
</tr>
</tbody>
</table>
</div>
你是指表格行还是表格? – ConorReidd
@ConorReidd表行 – snakeeyes08