Question

我正在处理申请表。除了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="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>

Answer 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等模板引擎。

<强>结论

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

Answer 2

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

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

Answer 3

如果您正在使用jQuery，我完全承诺使用它而不是混合使用vanilla JS，就像使用jQuery一样，您可以使用clone并有效地删除您正在尝试实现的内容。此外，如果您打算将其作为表单提交，请务必在输入名称中添加[]，以便正确解析每一行，因为输入字段的名称相同。请参阅以下代码段：

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 个答案: