javascript - 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 to delete the extra rows if current number of rows are more than a user's need.

My code is working, but I think it does not make a lot of sense. So I am wondering if anyone could correct my mistakes and make my code more reasonable. (I was trying to use two indices to control this add or remove activity. One index check the current existed elements and get the difference between user's new input. Then do the add or remove movements. But I failed to do this.)

In addition, is it possible to adjust the width of added <td> without changing the shape of the first table row? Thanks for your help! Here is a demo.

HTML

<form method="post" id="form1" action=index.html>
    <table class="tab tab_Application" border="0">
        <tr>
            <th>
                <label for="id_noa">Number of Applications:</label>
            </th>
            <td>
                <select name="noa" id="id_noa">
                    <option value="">Make a selection</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </td>
        </tr>
        <tr id='noa_header' style="display:none">
            <th>App#</th>
            <th>Month</th>
            <th>Day</th>
            <th>Mass Applied (kg/hA)</th>
            <th>Slow Release (1/day)</th>
        </tr>
    </table>
</form>

JS

$(document).ready(function () {
    var i = 1
    $('#id_noa').change(function () {
        var total = $(this).val()
        $('#noa_header').show()

    //I was trying to use two indices to control this add or remove activity. One index check the current existed elements and get the difference between user's new input. Then do the add or remove movements. But I failed to do this.

        while (i <= total) {
            $('.tab_Application').append('<tr class="tab_noa1"><td><input type="text" size="5" value="' + i + '"/></td><td><input type="text" size="5" name="mm' + i + '" id="id_mm' + i + '""/></td><td><input type="text" size="5" name="dd' + i + '" id="id_dd' + i + '""/></td><td><input type="text" size="5" name="ma' + i + '" id="id_ma' + i + '""/></td><td><input type="text" size="5" name="sr' + i + '" id="id_sr' + i + '" value="0""/></td></tr>');
            i = i + 1;
        }
        while (i-1 > total) {
            $(".tab_Application tr:last").remove();
            i=i-1
        }

        $('</table>').appendTo('.tab_Application');

    })
});

Answer 1

At these situations jQuery excels, let us play with all sort of selectors. First you need to separate the header and body of the table (thead and tbody). (Code not tested).

function refresh(new_count) {
//how many applications we have drawed now ?
var old_count = parseInt($('tbody').children().count());
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
//if we have rows to add
if (rows_difference > 0)
{
    //$('tbody').append() or prepend() new empty rows based on your pattern with a loop
}
else if (rows_difference < 0)//we need to remove rows ..
{
    var index_start = old_count - rows_difference;//for the LAST X rows
    $('tr:gt('+index_start+')').remove();
}
}