pfam_next_tab

by amullins

HTML

<script src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<form method="post" id="form1" action=index.html>
    <table class="tab tab_Application" border="0">
        <thead>
        <tr>
            <th>
                <label for="id_noa">Number of Applications:</label>
            </th>
            <td>
                <select name="noa" id="id_noa">
                    <option value="0">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>
        </thead>
        <tbody>
        </tbody>
    </table>
</form>

JavaScript

var row_i = 0;

function emptyRow() {
   row_i++;
   this.obj = $("<tr></tr>");
   this.obj.append('<td><input type="text" size="5" value="' + row_i + '"/></td>');
   this.obj.append('<td><input type="text" size="5" name="mm' + row_i + '" id="id_mm' + row_i + '""/></td>');
   this.obj.append('<td><input type="text" size="5" name="dd' + row_i + '" id="id_dd' + row_i + '""/></td>');
   this.obj.append('<td><input type="text" size="5" name="ma' + row_i + '" id="id_ma' + row_i + '""/></td>');
   this.obj.append('<td><input type="text" size="5" name="sr' + row_i + '" id="id_sr' + row_i + '" value="0""/></td>');
}

function refresh(new_count) {
//how many applications we have drawed now ?
    console.log("New count= " + new_count);
    if(new_count > 0) {
        $("#noa_header").show();
    }
    else {
        $("#noa_header").hide();
    }
var old_count = parseInt($('tbody').children().length);
    console.log("Old count= " + old_count);
//the difference, we need to add or remove ?
var rows_difference = parseInt(new_count) - old_count;
 console.log("Rows diff= " + rows_difference);
//if we have rows to add
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; 
    console.log("Index start= "+index_start);
    $('tr:gt('+index_start+')').remove();
    row_i += rows_difference;
  }
}

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