最初隱藏然後動態添加和刪除行

我正在處理請求表單。它需要列出研究團隊成員除了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

最初隱藏然後動態添加和刪除行

回答

相關問題