最初隐藏然后动态添加和删除行
问题描述:
我正在处理请求表单。它需要列出研究团队成员除了PI和提交表格之外的研究。然而,有些研究没有额外的团队成员,所以我希望该行保持隐藏状态,直到有人点击添加团队成员按钮。最初隐藏然后动态添加和删除行
什么是工作: 1.我已经隐藏最初加载页面上的元素。 2.单击添加行添加正确的行。 3.单击删除将删除一行。
当前问题: 1.如果有人添加了团队成员,然后删除所有团队成员,单击添加团队成员将不会添加一行。 2.当元素在初始页面加载时隐藏时,第一次点击添加团队成员按钮时会添加两行。
这是我现在的代码,只有表格的相关部分。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="assets/css/test.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
function addTableRow(jQtable){
jQtable.each(function(){
var tds = '<tr>';
jQuery.each($('tr:last td', this), function() {tds += '<td>'+$(this).html()+'</td>';});
tds += '</tr>';
if($('tbody', this).length > 0){$('tbody', this).append(tds);
}else {$(this).append(tds);}
});
}
</script>
<script>
function myDeleteFunction() {
document.getElementById("stmember").deleteRow(0);
}
</script>
<script type="text/javascript">
$(function() {
$('#add').click(function() {
$('#stmember').show();
});
});
</script>
<style>
#stmember {
display: none
}
</style>
</head>
<body>
<h3><strong>Other Study Team Members:</strong></h3>
<FORM>
<table id="stmember">
<tr>
<td>Name:
<label for="namest1"></label>
<input type="text" name="namest1" id="namest1" placeholder="First Name, Last Name" />
</td>
<td>JHED ID:
<label for="jhedst1"></label>
<input type="text" name="jhedst1" id="jhedst1" />
</td>
<td>Email:
<label for="emailst1"></label>
<input type="email" name="emailst1" id="emailst1" placeholder="[email protected]" />
</td>
</tr>
</table>
<CENTER>
<button type="button" id="add" onclick="addTableRow($('#stmember'));">Add Study Team Member</button>
<button type="button" onclick="myDeleteFunction()">Remove Study Team Member</button>
</CENTER>
</FORM>
</body>
</HTML>
答
如果您使用的是jQuery,我会完全致力于使用它来代替混合vanilla JS,就像jQuery一样,您可以使用克隆并有效地移除您尝试实现的内容。另外,如果您计划将此提交为表单,请确保将[]添加到您的输入名称,以便您可以正确解析每行,因为输入字段中的名称相同。请看下面的代码片段:
function addTableRow() {
var $tableRow = $('tr.model-row:first-child');
var $clonedRow = $tableRow.clone().show();
$('#stmember').append($clonedRow);
}
function myDeleteFunction() {
var $memberTRs = $('tr', '#stmember');
// If rowcount === 1, hide first row, don't remove it!!
var rowCount = $memberTRs.length;
if (rowCount === 1) {
$('tr.model-row:first-child').hide();
return;
}
$memberTRs.last().remove();
}
jQuery(function() {
$('#delete').click(function() {
myDeleteFunction();
});
$('#add').click(function() {
addTableRow();
});
});
.model-row {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<h3><strong>Other Study Team Members:</strong></h3>
<FORM>
<table id="stmember">
<tbody>
<tr class="model-row">
<td>Name:
<label for="namest1"></label>
<input type="text" name="namest1[]" id="namest1" placeholder="First Name, Last Name" />
</td>
<td>JHED ID:
<label for="jhedst1"></label>
<input type="text" name="jhedst1[]" id="jhedst1" />
</td>
<td>Email:
<label for="emailst1"></label>
<input type="email" name="emailst1[]" id="emailst1" placeholder="[email protected]" />
</td>
</tr>
</tbody>
</table>
<CENTER>
<button type="button" id="add">Add Study Team Member</button>
<button type="button" id="delete">Remove Study Team Member</button>
</CENTER>
</FORM>
</body>
答
当您创建一行时,您使用最后一个现有行来创建它。但是如果你删除了所有的行,你就失去了行的例子。
通过检查何时删除行,如果它是最后一行,在删除最后一行之前添加新行,可以轻松解决问题。
答
这里有几个解决方案为您提供:
解决方案1
存储变量内的addTableRow功能行的HTML。这样,您可以使用令牌作为输入ID以确保它们是唯一的。此外,您不必在HTML中提供第一行,因为它将通过您的JS函数创建。喜欢的东西:
var template = "<tr><td>Name:<label for="namest1"></label><input type="text" name="namest!!TOKEN!!" id="namest!!TOKEN!!" placeholder="First Name, Last Name" /></td><td>JHED ID:<label for="jhedst1"></label><input type="text" name="jhedst!!TOKEN!!" id="jhedst!!TOKEN!!" /></td><td>Email:<label for="emailst1"></label><input type="email" name="emailst!!TOKEN!!" id="emailst!!TOKEN!!" placeholder="[email protected]" /></td></tr>";
解决方案2
结论
最干净的方法是使用一个模板引擎,如果你是游戏这一点。但是使用字符串在你的函数中存储模板将会起作用。