Dynamically adding form element and table element in html page

Question

I want to add table's element and form element dynamically in html page but I am not able to do so. If I am entering 2 in input box then automatically 2 new input boxes should be added with label without clicking on any button. I think 'keyup' event handler should work here. But I am not able to form my code. Please guys help me here by correcting my code or suggest some other code for my same need.

HTML CODE:

<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

Actually user may paste number of rows.

Also you should clear youre table when input field value is changed.

 $(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

Your table is empty and you are trying to add new markup into tbody . Just add tbody into your table

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

Answer 3

It looks like everything should work fine the way you have it with 1 small change. In the loop, you have this selector, $("memNameTable tbody") although in your HTML you do not have tbody . You could either add tbody to your table in the HTML or change the selector to be $("memNameTable") .

Answer 4

A few pointers:

• You should be listening to the change event rather than the keyup event on your numeric input (this takes into account the cycling via the up and down arrows in the input box).

• You should subtract the number of existing table rows from the number in the input box in order to determine how many rows to append.

• There might not be a tbody inside your table; just append directly to the table element.

 $(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

As others pointed out, you're missing the TBODY on your TABLE.

Another point (also already made) is that you should be using a broader event (like onBlur or onChange).

In my oppinion, you shouldn't be adding elements with same ID (this will render your HTML as non-compliant - it will work though it might give you or others some headache on the future).

That being said, I'm not very into the HTML string manipulation thing and try to avoid it as much as I can, so, I would suggest you to use a "dummy" line (that should be ignored when posting the form), like:

<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>

For me this is a more clear way to not mix the HTML with code.

Note: the .hidden css class should be set to { display:none; } { display:none; } or something equivalent.