最初隐藏然后动态添加和删除行

我正在处理请求表单。它需要列出研究团队成员除了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>

来源

2017-06-15 Neph

如果您使用的是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>

来源

2017-06-15 20:29:19 Woodrow

当您创建一行时，您使用最后一个现有行来创建它。但是如果你删除了所有的行，你就失去了行的例子。

通过检查何时删除行，如果它是最后一行，在删除最后一行之前添加新行，可以轻松解决问题。

来源

2017-06-15 20:12:10 Kaenn

这里有几个解决方案为您提供：

解决方案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

使用模板引擎像jsRender或Mustache。

结论

最干净的方法是使用一个模板引擎，如果你是游戏这一点。但是使用字符串在你的函数中存储模板将会起作用。

来源

2017-06-15 20:26:53

最初隐藏然后动态添加和删除行

回答

相关问题