jQuery add or remove table row based on inputs

Question

Sorry, if this is too basic.

1. I am trying to add rows to a table if current number of rows are less than a user\'s demand.
2. At the same time, I need t

Answer 1

I took the ideas presented by @B3aT, edited, and fleshed out to make this (available at my fork of OP's jsfiddle:

var row_i = 0;

function emptyRow() {
  row_i++;
  this.obj = $("");
  this.obj.append('');
  this.obj.append('');
  this.obj.append('');
  this.obj.append('');
  this.obj.append('');
}

function refresh(new_count) {
  if(new_count > 0) {
    $("#noa_header").show();
  }
  else {
    $("#noa_header").hide();
  }
  var old_count = parseInt($('tbody').children().length);

  var rows_difference = parseInt(new_count) - old_count;

  if (rows_difference > 0)
  {
     for(var i = 0; i < rows_difference; i++)
        $('tbody').append((new emptyRow()).obj);
  }
  else if (rows_difference < 0)//we need to remove rows ..
  {
     var index_start = old_count + rows_difference + 1;          
     $('tr:gt('+index_start+')').remove();
     row_i += rows_difference;
  }
}

$(document).ready(function () {
    $('#id_noa').change(function () {
        refresh( $(this).val() );
    })
});

The reason the emptyRow function is so long is that I wanted to make the number of columns easy to manipulate. Each column is appended individually, so changing the default pattern is simple.

In the html, I had to add the thead and tbody tags as described in @B3aT's answer. The thead includes the first two rows, because row 1 is the select box and row 2 is the actual header for the table. The tbody is empty to start.

As far as changing styles for individual rows (like adjusting column width), you'd be better off not using a table. Table-like behavior can be as simple as using float:left in your column style, making sure to place a div with clear:both at the end of each row.