问题：

首先隐藏行，然后动态添加和删除行

荀靖

2023-03-14

我正在写申请表。它需要列出除了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>

共有3个答案

丁绪

2023-03-14

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

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

爱唯

2023-03-14

如果您使用的是jQuery，我将完全致力于使用它，而不是混合使用普通的JS，因为对于jQuery，您可以有效地使用clone和remove来实现您想要实现的目标。此外，如果您计划将此作为表单提交，请确保将[]添加到您的输入名称中，以便您可以正确解析每一行，因为输入字段中的名称相同。请参阅以下代码片段：

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>

孙玺

2023-03-14

以下是为您提供的几个解决方案：

解决方案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或Mustach等模板引擎。

结论

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

类似资料：

使用JavaScript动态添加/删除表行

问题内容：我正在尝试添加/删除表行。这是我的代码： HTML表格 JavaScript 现在，如您所见，在我的表格中，我有文本字段和按钮。我想要的是：仅重复行的结构。我现在无法执行此操作，因为innerHTM仅接收文本。如何插入文本框或标签？文本字段的ID也应该不同，因为稍后我将检索这些值以将其放入数据库中。我想放置一个函数以增加POI的数量有人可以帮我吗？问题答案：您可以仅克隆具
如何在React.js中动态添加和删除表行

问题内容： https://jsfiddle.net/techboy0007/j1eas924/ https://i.stack.imgur.com/KXFot.png 问题答案：您可以通过反应状态来实现。在您的情况下，您正在使用嵌套对象，因此在更新它们时需要格外小心。突变您的想法不是一个好主意，因为它很容易导致错误或意外行为。仔细查看这些功能的工作方式。在这里，您有一个现场演示。 PD：
JQuery动态添加和删除表格行的方法

本文向大家介绍JQuery动态添加和删除表格行的方法，包括了JQuery动态添加和删除表格行的方法的使用技巧和注意事项，需要的朋友参考一下本文实例讲述了JQuery动态添加和删除表格行的方法。分享给大家供大家参考。具体分析如下：昨天做页面表格行动态添加和删除，看了无数的介绍，发现了一个好东东，JQuery。用它实现起来还真的是很方便，这个是我用到我们平台的一个方法。后台使用的也是比较容易的，
创建动态网格窗格（添加和删除行）

我知道如何处理MenuItems的操作。我只需要动态网格窗格的帮助。 GridPanes有一个内置的函数addRow，也许它是一个可以使用的函数。我该怎么解决这个？谢谢！感谢所有的提示。
动态添加和删除角度组件

问题内容：当前的官方文档仅显示如何动态更改标签内的组件。我想实现的是，让我们说我有3个部分组成：，，并具有以下选择：再有6个按钮，这将增加或删除每个组件：，，和当我单击时，该页面将添加到呈现它的页面中，因此该页面将包含：然后，如果我单击两次，该页面现在将包含：如果单击，该页面现在将包含所有这些组件：可以在Angular中实现吗？请注意，这不是我要寻找的解决方案，因为它仅允许向
锁定、隐藏和删除对象

锁定或解锁对象或图层锁定对象可防止对象被选择和编辑。只需锁定父图层，即可快速锁定其包括的多个路径、组和子图层。若要锁定对象，请单击 “图层 ”面板中与要锁定的对象或图层对应的编辑列按钮（位于眼睛图标的右侧）。用鼠标指针拖过多个编辑列按钮可一次锁定多个项目。或者，您可以选择要锁定的对象，然后选择 “对象 ”>“锁定 ”>“所选对象 ”。若要解锁对象，请单击 “图层 ”面板中与要解锁的对象或图层

首先隐藏行，然后动态添加和删除行

共有3个答案

相关问答

相关文章

相关阅读

相关工具

相关文档