Table not being displayed using jQuery?

Question

I have a select option. When the user selects the option I want to append the row to the table. For example, if user selects 2 then I want to add 2 rows to the table, but my row is not being displayed.

<script src="http://code.jquery.com/jquery-2.1.0.js"></script>
<p><strong>Select No of Activites You Want To Fill Up:</strong>
   <select id="noAct">
      <option value="1>1</option>
      <option value="2">2</option>
      <option value="3">3</option>
   </select>


    <table class="table table-bordered" id="tables">
        <tr>
            <th>SN</th>
            <th>Activity Description</th>
            <th>Unit</th>
            <th>Weightage</th>
            <th>100</th>
            <th>75</th>
            <th>50</th>
            <th><50</th>
        </tr>

    </table>
<script>
    function displayTable()
    {
        var value = $("#noAct").val();

        $("#tables").empty();
        //for loop to display the no of tables required
        for ( var i=0; i < value; i++ )
        {
            //display the table
            $("#tables").append("<tr>
                                                    <td>1</td>
                                                    <td>Web Site</td>
                                                    <td>Time</td>
                                                    <td>20</td>
                                                    <td>1 days</td>
                                                    <td>2 days</td>
                                                    <td>3 days</td>
                                                    <td>4 days</td>
                                                 </tr>

                ");

        }
    }

    $( "select" ).change( displayTable );
    displayTable();
</script>

Answer 1

Try This

HTML

<select id="noAct">
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
   </select>


    <table  class="table table-bordered">
        <tr>
            <th>SN</th>
            <th>Activity Description</th>
            <th>Unit</th>
            <th>Weightage</th>
            <th>100</th>
            <th>75</th>
            <th>50</th>
            <th><50</th>
        </tr>
          <tbody id="tbodyappend">
                </tbody>
    </table>

JS

$(document).ready(function(){

    function displayTable()
    {
       var value = $("#noAct").val();

      $("#tbodyappend").empty();
        //for loop to display the no of tables required
        for ( var i=0; i < value; i++ )
        {
            //display the table
            $("#tbodyappend").append('<tr><td>'+(i+1)+'</td><td>Web Site Maintenance</td><td>Time</td><td>20</td><td>1 days</td><td>2 days</td> <td>3 days</td><td>>3 days</td></tr>');

        } 
    }

        $( "select" ).change(displayTable);

});

LIVE DEMO HERE

Answer 2

try this :

function displayTable()
    {
       var value = $("#noAct").val();

      $("#tables").empty();
        //for loop to display the no of tables required
        for ( var i=0; i < value; i++ )
        {
            //display the table
            $("#tables").append('<td>1</td><td>Web Site Maintenance</td><td>Time</td><td>20</td><td>1 days</td><td>2 days</td> <td>3 days</td><td>>3 days</td>');

        } 
    }

        $( "select" ).change(displayTable);

live demo