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

【问题标题】：Initially Hiding and then Dynamically Adding and Removing Rows最初隐藏然后动态添加和删除行
【发布时间】：2017-11-18 10:49:06
【问题描述】：

我正在处理申请表。除了 PI 和表格的提交者之外，它还需要列出研究研究的研究团队成员。但是，有些研究将没有其他团队成员，因此我希望该行保持隐藏状态，直到有人单击“添加团队成员”按钮。

什么有效： 1. 我在最初加载页面时隐藏了该元素。 2. 单击添加行添加正确的行。 3. 点击remove会删除一行。

当前问题： 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="you@example.com" />
        </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>

【问题讨论】：

标签： javascript jquery html

【解决方案1】：

这里有几个解决方案：

解决方案 1

将行的 HTML 存储在变量中的 addTableRow 函数中。这样，您可以使用输入 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="you@example.com" /></td></tr>";

解决方案 2

使用模板引擎，如 jsRender 或 Mustache。

结论

最简洁的方法是使用模板引擎，如果您愿意的话。但是在你的函数中使用字符串来存储模板是可行的。

【讨论】：

【解决方案2】：

如果您使用 jQuery，我会完全承诺使用它而不是混合 vanilla JS，就像使用 jQuery 一样，您可以有效地使用克隆和删除来实现您想要实现的目标。此外，如果您打算将此作为表单提交，请务必将 [] 添加到您的输入名称中，以便您可以正确解析每一行，因为输入字段上的名称相同。请看下面的sn-p：

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="you@example.com" />
          </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>

【讨论】：

【解决方案3】：

创建行时，您使用最后一个现有行来创建它。但是，如果您删除所有行，则会丢失行示例。

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

【讨论】：