如何在點擊按鈕時向html表單添加額外的行？

我試圖通過點擊添加新添加一個新的行到HTML表單中。我有一些錯誤。如果點擊錯誤還要查找刪除行添加新行。如何在點擊按鈕時向html表單添加額外的行？

 <table id='myTable'> 
      <tr> 
      <th>Proposer</th> 
      <th>Institution</th> 
      <th>E-mail</th> 
      <th>You will be present <br>(Y/N)</th></tr> 

      <tr> 
      <td><input type="text" name="proposer" size="20"><span 
class="text-danger"><?php echo $proposerError; ?></span> &nbsp;</td> 
       <td><input type="text" name="institute" size="30"><span 
class="text-danger"><?php echo $instituteError; ?></span> &nbsp;</td> 
      <td> <input type="text" name="email" size="15"> <span 
class="text-danger"><?php echo $emailError; ?></span> &nbsp;</td> 
      <td><input type="text" name="present" size="4"><span 
class="text-danger"><?php echo $presentError; ?></span></td> 
     </tr> 




    <a href=" onclick='$("<tr><td><input type="text" name="proposer2" size="20" /></td> 
            <td><input type="text" name="intitute2" size="30"/></td> 
            <td><input type="text" name="email2" size="15"/></td> 
            <td><input type="text" name="present2" size="4"/></td> 
           </tr>").appendTo($("myTable")); return false;'>Add new</a> 

      </table>

來源

2017-10-21 explorer104

其中之一，你的選擇是錯誤的：'$（「myTable」）'應該是'$（「＃myTable」）' – SourceOverflow

起初這個

<table id='myTable'> 
      <tr> 
      <th>Proposer</th> 
      <th>Institution</th> 
      <th>E-mail</th> 
      <th>You will be present <br>(Y/N)</th></tr> 

      <tr> 
      <td><input type="text" name="proposer" size="20"><span 
class="text-danger"><?php echo $proposerError; ?></span>  </td> 
       <td><input type="text" name="institute" size="30"><span 
class="text-danger"><?php echo $instituteError; ?></span>  </td> 
      <td> <input type="text" name="email" size="15"> <span 
class="text-danger"><?php echo $emailError; ?></span>  </td> 
      <td><input type="text" name="present" size="4"><span 
class="text-danger"><?php echo $presentError; ?></span></td> 
     </tr> 


      </table> 
<a href="#" class="add-more">Add More</a>

取代你的HTML標記，然後使用該波紋管jQuery代碼

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
    jQuery('.add-more').click(function(event){ 
     event.preventDefault(); 
     jQuery('#myTable').append('<tr><td><input type="text" name="proposer2" size="20" /></td><td><input type="text" name="intitute2" size="30"/></td><td><input type="text" name="email2" size="15"/></td><td><input type="text" name="present2" size="4"/></td></tr>'); 
    }); 
}); 
</script>

然後讓我知道結果。謝謝

來源

2017-10-21 11:13:34

@Sauvik Sikdar ...一旦我點擊添加新按鈕，什麼都沒有發生 – explorer104

它適用於我的結局。請檢查您的瀏覽器的控制檯。如果您在控制檯中發現任何錯誤，請告訴我。 –

-1

沒有href標記的末尾，選擇是錯誤的$（「myTable的」）在倒數第二行。

使用這樣的

<a href="#" onclick='$("<tr><td><input type=\"text\" name=\"proposer2\" size=\"20\" /></td> 
           <td><input type=\"text\" name=\"intitute2\" size=\"30\"/></td> 
           <td><input type=\"text\" name=\"email2\" size=\"15\"/></td> 
           <td><input type=\"text\" name=\"present2\" size=\"4\"/></td> 
          </tr>).appendTo($("#myTable")); return false;'>Add new</a>

編輯使用引號

來源

2017-10-21 11:00:57

現在檢查這個！ –

如何在點擊按鈕時向html表單添加額外的行？

回答

相關問題