在html頁面中動態添加表單元素和表格元素

Question

我想在html頁面中動態添加表格的元素和表單元素，但我無法這樣做。 如果我在輸入框中輸入2，則應該自動添加2個帶有標簽的新輸入框，而無需單擊任何按鈕。 我認為“ keyup”事件處理程序應該在這里工作。 但是我無法形成我的代碼。 請大家在這里通過更正我的代碼或為我的相同需求建議其他代碼來幫助我。

HTML代碼：

<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable"></table>

JAVASCRIPT：

<script type="text/javascript">
     $(document).ready(function(){
        $("#teamMemNum").on('keyup', function(){
            var num = $("#teamMemNum").val();
            var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>";
            for(var i = 0; i < num; i++){
                $("#memNameTable tbody").append(markup);
            }
        });
    });
</script>

Answer 1

實際上，用戶可以粘貼行數。

另外，更改輸入字段值時，也應清除表。

 $(document).ready(function(){ $("#teamMemNum").on('change paste keyup', function(){ $("#memNameTable").html(""); var num = $("#teamMemNum").val(); var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>"; for(var i = 0; i < num; i++){ $("#memNameTable").append(markup); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="number" id="teamMemNum"> </form> <table id="memNameTable"></table> 

Answer 2

您的table為空，您正在嘗試向tbody添加新markup 。 只需將tbody添加到您的table

<form>
    <input type="number" id="teamMemNum">
</form>
<table id="memNameTable">
  <tbody></tbody>
</table>

Answer 3

看起來只有一處小小的改動，一切都可以正常工作。 在循環中，您擁有此選擇器$("memNameTable tbody")盡管在HTML中您沒有tbody 。 您可以將tbody添加到HTML中的表中，也可以將選擇器更改為$("memNameTable") 。

Answer 4

一些提示：

• 您應該在數字輸入上監聽change事件，而不是keyup事件（這要考慮到通過輸入框中的向上和向下箭頭進行循環）。

• 您應該從輸入框中的數字中減去現有表的行數，以確定要追加的行數。

• 桌子里可能沒有tbody 。 只需直接附加到table元素即可。

 $(document).ready(function() { $("#teamMemNum").on('change', function() { var num = $("#teamMemNum").val() - $('#memNameTable tr').length; var markup = "<tr><td><label for='memName'>Enter name: </label></td><td><input type='text' name='memName' id='memName'></td><td></td><td></td></tr>"; for (var i = 0; i < num; i++) { $("#memNameTable").append(markup); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <input type="number" id="teamMemNum"> </form> <table id="memNameTable"></table> 

Answer 5

正如其他人指出的那樣，您在表上缺少TBODY。

另一點（也已經提出）是您應該使用更廣泛的事件（例如onBlur或onChange）。

在我看來，您不應該添加具有相同ID的元素（這會使您的HTML格式不符合要求-可以正常工作，盡管這可能會使您或其他人對未來感到有些頭疼）。

話雖這么說，我不太喜歡HTML字符串操作，並盡我所能避免它，因此，我建議您使用“虛擬”行（在發布表單時應將其忽略），喜歡：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <input type="number" id="teamMemNum">
</form>
<table id="memNameTable">
  <tbody>
    <tr class="hidden sampleTR">
      <td><label for='memName' class="lineLabel">Enter name: </label></td>
      <td><input type='text' name='memName'></td>
      <td></td>
      <td></td>
    </tr>
  </tbody>
</table>


<script type="text/javascript">
 $(document).ready(function(){
    $("#teamMemNum").on('change', function(e){
        var num = $("#teamMemNum").val();

        for(var i = 0; i < num; i++){

            //Clone a new line from the dummy sample (invisible) line
            var newLine = $('#memNameTable').find('tr.sampleTR').first().clone();

            //Generate a new id to be used
            var newID = 'memName_' + $('#memNameTable').find('tr').length;

            //Sets the new ID on the newLine elements
            $(newLine).find('input[name=memName]').attr('id', newID);
            $(newLine).find('label.lineLabel').attr('for', newID);

            //Append the newLine to the TBody of the Table
            $(newLine).appendTo($("#memNameTable tbody"));
        }
    });
});
</script>

對我來說，這是一種不將HTML與代碼混合使用的更清晰的方法。

注意： .hidden CSS類應設置為{ display:none; } { display:none; }或類似的內容。