Develop Reference

How do I fill a cell in the table dynamically?

How do I fill a cell in the table dynamically after the user selects an option within the column?
Inside the select there is an update function and it is working, but I can't update column two of the line with the data given value of the select.
function update(line) {
// update in the col of mytable for next col.
// whats wrong with this code?
// Why not working?
var td = line.closest('td');
td.nextSibling.innerText = line.value;
}
<table id="myTable">
<thead>
<tr>
<td>Selection</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td id='emilio'>
1
</td>
</tr>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td>
2
</td>
</tr>
</tbody>
</table>

Since the onChange is working, you need to select the containing td then update then next one like:
function onChange(update) {
var td = update.closest('td');
td.nextElementSibling.innerText = update.value;
}

Your function name should be update, try this
function update(e) {
//update in the col of mytable for 0
if( e.id ==='item1'){
document.getElementById('selection1').innerHTML= e.value
}else{
document.getElementById('selection2').innerHTML= e.value
}
}
<table id="myTable">
<thead>
<tr>
<td>Selection</td>
<td>Value</td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item1" onChange='update(this)' class='options' name='choice'>
<option value='1'>option1</option>
<option value='2'>option2</option>
<option value='3'>option3</option>
<option value='4'>option4</option>
</select>
</div>
</td>
<td id='selection1'>
1
</td>
</tr>
<tr>
<td>
<div class='form-group col-md-12 col-xs-12'>
<select id="item2" onChange='update(this)' class='options' name='choice'>
<option value='option1'>option1</option>
<option value='option2'>option2</option>
<option value='option3'>option3</option>
<option value='option4'>option4</option>
</select>
</div>
</td>
<td id='selection2' ></td>
</tr>
</tbody>
</table>

highlight the row which has null value - jQuery (not working as expected)

When user click on GetData button, i'm getting the json data and displaying in the html table as shown in the demo.
Demo: https://plnkr.co/edit/I4XYY6CZohf7IS6wP8dR?p=preview
Sometimes the value can be null as it was for the loanNum variable shown below.
var loanNum = [{ "code": "23432", "description": "23432" }, { "code": null, "description": null }];
If atleast one value is null for a specific row, i want to highlight that entire row with red color so that user knows that row has null value.I tried with the below code,
but the row which has null value is not highlighting with red color..
if(loanNum[i].code == null){
console.log("row has null value");
$(this).css({'background-color':'red'});
}
Any inputs would be helpful.

you're targeting $(this) as though it is the current row, even though there is no reason for it to be (it is actually the window object). You need to select the row and then colour it red, this should do the trick:
$('#loanTable tr')[j].style = "background-color:red"
or if you want to stick to using jQuery's css() method:
$($('#loanTable tr')[j]).css('background-colod','red')
though I don't recommend it since it is unnecessarily verbose.

Updated This will goes through every fields ('code', 'description'), and find if any of that have null value.
function submitData() {
var flag = true;
$('#loanTable input[type="text"]').val('');
$('.mortgageType').val('');
$('.order').val('');
if (flag) {
//values from backend
var mortageType = [{ "code": "Home", "description": "Home" }, { "code": "Car", "description": "Car" }];
var loanNum = [{ "code": "23432", "description": "23432" }, { "code": null, "description": null }];
var status = [{ "code": "Approved", "description": "Approved" }, { "code": "Pending", "description": "Pending" }];
var j = 0;
//iterate and show the jsonData in the table2 when user click on submit button
for (var i = 0; i < mortageType.length; i++) {
j = j + 1;
console.log("-- loanNum[i].code ---- " + loanNum[i].code);
document.getElementById("mortageType" + j).value = mortageType[i].code;
document.getElementById("loanNum" + j).innerText = loanNum[i].code;
document.getElementById("status" + j).innerText = status[i].code;
// Loop through all fields.
Object.keys(loanNum[i]).forEach(function(key) {
// Check if any fields is null
if (loanNum[i][key] == null) {
$('#status' + j).parent().parent().css({'border':'red'});
}
});
}
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<table class="loanTable" id="loanTable" border="1">
<tbody>
<tr>
<th> <label for="show"><span name="3765" maxlength="1"class="message">Year</span></label> </th> <!-- From Dealer -->
<th> <label for="show"><span name="568" maxlength="1" class="message">Mortgage Type</span>
<span name="496" maxlength="1" class="message"></span>
</label>
</th>
<th> <label for="show"><span name="3702" maxlength="1" class="message">Loan Num</span></label> </th>
<th> <label for="show"><span name="2366" maxlength="1" class="message">Status</span></label> </th>
<th> <label for="show"><span name="179" maxlength="1" class="message">Comments</span></label> </th>
</tr>
<tr>
<td>
<label for="show" class="ddownlabels"></label> <!-- From Dealer -->
<select id="year" name="year" disabled>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label> <!-- From Dealer -->
<select id="mortageType1" name="mortageType1" class="mortgageType">
<option value=""></option>
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord1" id="ord1" class="order">
</div>
</td>
<td><div class="cloneX10 indField" id="loanNum1"></div></td>
<td><div class="cloneX10 indField" id="status1"></div></td>
<td><div class="cloneX10 indField" id="comments1"></div></td>
</tr>
<!--Second row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label> <!-- From Dealer -->
<select id="year" name="year" disabled>
</select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label> <!-- From Dealer -->
<select id="mortageType2" name="mortageType2" class="mortgageType">
<option value=""></option>
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord2" id="ord2" class="order">
</div>
</td>
<td><div class="cloneX10 indField" id="loanNum2"></div></td>
<td><div class="cloneX10 indField" id="status2"></div></td>
<td><div class="cloneX10 indField" id="comments2"></div></td>
</tr>
<!--Third Row-->
<tr>
<td>
<label for="show" class="ddownlabels"></label> <!-- From Dealer -->
<select id="year" name="year" disabled></select>
</td>
<td>
<div class="cloneX10 indField">
<label for="show" class="ddownlabels"></label> <!-- From Dealer -->
<select id="mortageType3" name="mortageType3" class="mortgageType">
<option value=""></option>
<option value="Auto">Auto</option>
<option value="Home">Home</option>
<option value="Car">Car</option>
</select>
<input name="ord3" id="ord3" class="order">
</div>
</td>
<td><div class="cloneX10 indField" id="loanNum3"></div></td>
<td><div class="cloneX10 indField" id="status3"></div></td>
<td><div class="cloneX10 indField" id="comments3"></div></td>
</tr>
</tbody>
</table><br>
<input type="submit" value="GetData" onclick="submitData()">
</body>
</html>

jquery select option by text not working properly

In my code there are three select elements (one for each file) with 3 or 4 options each. I have added one Apply All button on the row having first file.
If an user selects the sheet name on the first file and clicks on Apply All button, it has to select same sheets on all the files. If the sheet was missing on anyone of the files, it has to show an alert like "mismatched sheets". Here is what I tried,
<form method="post" id="sheetForm" action="#"><input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="col-sm-12">
<div class="m-b-15">
</div>
</div>
</div>
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline">By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="select1" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2">Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="select2" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected">Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2" >2</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="select3" class="form-control input-small sheet-select" name="sheet-select">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1" >1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</form>
and the relevant js code looks like,
$('#btnApplyAll').on('click', function(){
// get the selected option of first select
var noSuchOption = false;
var selectedOption = $('#select1').find(":selected").text();
var selects = $('select[name="sheet-select"]');
$('select[name="sheet-select"] option[selected="selected"]').removeAttr('selected');
$.each(selects, function(index, select) {
var opts = $(select).find('option').filter(function(){ return this.text == selectedOption;});
if(opts.length < 1) {
noSuchOption = true;
return false;
}
});
if(noSuchOption) {
notify_long("Selected sheet doesn't exists in all files!", 'danger');
} else {
$('select[name="sheet-select"] option').filter(function(){
return this.text == selectedOption;
}).attr('selected', true);
}
});
This piece of code works on the initial stage of 3 or 4 button clicks but if I click on apply all button after choosing sheet1 on file1, sheet2 on file2, sheet1 on file3 at the middle stage, it fails to change. On that time, switching between radio buttons also fails to display the relevant option.
jsFiddle

This could meet your requirements:
$('#btnApplyAll').on('click', function(){
var noSuchOption = false;
var selectedOption = null;
$('select.sheet-select').each(function(index) {
if (noSuchOption) return;
if (index == 0) {
selectedOption = $(this).val();
return;
}
if ($(this).find('option[value="' + selectedOption + '"]').length === 0) {
noSuchOption = true;
alert("File: "+$(this).parent().prev().val() +" have not selected sheet", 'danger');
return;
}
$(this).val(selectedOption);
})
});
function toggleOptions(e) {
var toggle = $(this).attr('id') == 'inlineRadio1' ? 'name' : 'index';
$('select.sheet-select option').hide()
$('select.sheet-select').each(function() {
let optsToShow = $(this).find('option[value^="'+ toggle +'"]');
optsToShow.show();
$(this).val(optsToShow.first().attr('value'));
});
}
$('#inlineRadio1, #inlineRadio2')
.change(toggleOptions)
.first().change(); // trigger change to initialize
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sheetForm" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="option1" name="radioInline" checked>By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="option2" name="radioInline">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="select1" class="form-control input-small sheet-select" name="sheet-select-feb">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2">Sheet2</option>
<option value="index 2">2</option>
<option value="name 3">Sheet3</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="select2" class="form-control input-small sheet-select" name="sheet-select-jan">
<option value="name 1" selected="selected">Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2" >2</option>
</select>
</td>
<td>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="select3" class="form-control input-small sheet-select" name="sheet-select-mar">
<option value="name 1" selected="selected" >Sheet1</option>
<option value="index 1">1</option>
<option value="name 2" >Sheet2</option>
<option value="index 2">2</option>
</select>
</td>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</form>

$(document).ready(function() {
// Default select mode of sheet
$(".rdoSelection[value='byName']").prop("checked", true);
function selectCheckboxstatus() {
var selectionMode;
$(".clsDdPosition").prop("selectedIndex", 0);
$(".clsDdName").prop("selectedIndex", 0);
selectionMode = $(".rdoSelection:checked").val();
if ("byName" === selectionMode) {
$(".clsDdPosition").hide();
$(".clsDdName").show();
} else if ("byPosition" === selectionMode) {
$(".clsDdPosition").show();
$(".clsDdName").hide();
}
}
selectCheckboxstatus();
$(".rdoSelection").on("click", function(e) {
selectCheckboxstatus();
});
$(".btnApplyAll").on("click", function(e) {
var selectedValue, selectedClass, ddSelectionMode;
ddSelectionMode = $(".rdoSelection:checked").val(); if ("byName" === ddSelectionMode) {
selectedValue = $("#ddSheetByName1").val();
selectedClass = ".clsDdName";
} else if ("byPosition" === ddSelectionMode) {
selectedValue = $("#ddSheetByPosition1").val();
selectedClass = ".clsDdPosition";
}
$(selectedClass).each(function() {
$(this).val(selectedValue);
});
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" id="sheetForm" action="#">
<input type="hidden" name="csrfmiddlewaretoken" value="cR9fmhJk0hhQF0FIFscTABn3DXnXMPNPAOu2cZhSwFwRfC0FleEUJnlVsqbC2I4D">
<div class="row">
<div class="col-sm-12">
<div class="m-b-15">
</div>
</div>
</div>
<div class="row">
<div class="m-b-30 form-group">
<label class="col-md-4 control-label">Sheet Select Mode</label>
<div class="col-md-8">
<label class="radio-inline">
<input type="radio" id="inlineRadio1" value="byName" name="radioInline" class="rdoSelection">By Name
</label>
<label class="radio-inline">
<input type="radio" id="inlineRadio2" value="byPosition" name="radioInline" class="rdoSelection">By Position
</label>
</div>
</div>
<table id="tblPreview" class="table table-hover dt-responsive nowrap" cellspacing="0" width="100%">
<thead>
<tr>
<th>File Name</th>
<th>Sheet Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td class="file-name">test-data-input-xls-mult-feb.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-feb.xlsx">
<td>
<select id="ddSheetByName1" class="form-control input-small ddSheetByName1 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition1" class="form-control input-small ddSheetByPosition1 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
<td class="open">
<button type="button" id="btnApplyAll" class="btn btn-default dropdown-toggle btnApplyAll" data-toggle="dropdown" aria-expanded="true">Apply All Files </button>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-jan.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-jan.xlsx">
<td>
<select id="ddSheetByName2" class="form-control input-small ddSheetByName2 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition2" class="form-control input-small ddSheetByPosition2 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
</tr>
<tr>
<td class="file-name">test-data-input-xls-mult-mar.xlsx</td>
<input type="hidden" name="filename" value="test-data-input-xls-mult-mar.xlsx">
<td>
<select id="ddSheetByName3" class="form-control input-small ddSheetByName3 clsDdName" name="sheet-select">
<option value="sheet1">Sheet1</option>
<option value="sheet2">Sheet2</option>
</select>
<select id="ddSheetByPosition3" class="form-control input-small ddSheetByPosition3 clsDdPosition" name="sheet-select">
<option value="index1">1</option>
<option value="index2">2</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
</form>

Accessing parent select value in pop-window or save into a temp table

I have a number of select as below.
<form method="post" name="form1" action="addpp.php" enctype="multipart/form-data" onSubmit="return validateForm();">
<table width="100%">
<tr>
<td>
<select name="leftProcess" size="5">
<option value="1">Process 1</option>
<option value="2">Process 2</option>
<option value="3">Process 3</option>
</select>
</td>
<td>
<button onclick="moveRight('leftProcess','rightProcess')">>></button><br/>
<button onclick="moveLeft('rightProcess','leftProcess')"><<</button>
</td>
<td>
<select name="rightProcess" size="5">
</select>
</td>
</tr>
<tr>
Sub process for Process 1
<td>
<select name="leftSubProcess1" size="5">
<option value="1">Sub 1_1</option>
<option value="2">Sub 1_2</option>
<option value="3">Sub 1_3</option>
</select>
</td>
<td>
<button onclick="moveRight('leftSubProcess1','rightSubProcess1')">>></button><br/>
<button onclick="moveLeft('rightSubProcess1','leftSubProcess1')"><<</button>
</td>
<td>
<select name="rightSubProcess1" size="5">
</select>
</td>
</tr>
<tr>
Sub process for Process 2
<td>
<select name="leftSubProcess2" size="5">
<option value="1">Sub 2_1</option>
<option value="2">Sub 2_2</option>
<option value="3">Sub 2_3</option>
</select>
</td>
<td>
<button onclick="moveRight('leftSubProcess2','rightSubProcess2')">>></button><br/>
<button onclick="moveLeft('rightSubProcess2','leftSubProcess2')"><<</button>
</td>
<td>
<select name="rightSubProcess2" size="5">
</select>
</td>
</tr>
<tr>
Sub process for Process 3
<td>
<select name="leftSubProcess3" size="5">
<option value="1">Sub 3_1</option>
<option value="2">Sub 3_2</option>
<option value="3">Sub 3_3</option>
</select>
</td>
<td>
<button onclick="moveRight('leftSubProcess3','rightSubProcess3')">>></button><br/>
<button onclick="moveLeft('rightSubProcess3','leftSubProcess3')"><<</button>
</td>
<td>
<select name="rightSubProcess3" size="5">
</select>
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="submit" name="Add" value="Add" style="width:80px; height:25px;"></input>
<input type="button" name="Preview" onclick="javascript:openChildWindow();" value="Preview" style="width:80px; height:25px;"/>
<input type="reset" name="reset" value="Cancel" style="width:80px; height:25px;"/>
</td>
</tr>
</table>
</form>
The first select will be all the process so user can choose and push them to the right select box. Accordingly the 3 below select are for sub process for the all the process above. User can also pick and choose which one they would desire.Once I cick the preview button I would the user to view their selection in this format. For e.g. use pickProcess 3 followed by Process 2 and Process 1. So then below must first show all the sub_proces3 then sub_process2 and sub_process1. What is best was to select and show these sort of data must I like save into a temp table? The idea is to give them a preview what they have select before the final submission into database.

Hide input boxes based on drop down selection

I want a drop down menu at the top of the page to determine how many boxes are then showing on the page.
If the user selects 1, only 1 table shows
If the user selects 2, 2 tables show
I have added the code so hopefully it makes more sense
<body>
<p>Please select number of puppies:</p>
<p>
<select>
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td>
<input name="PuppyMicrochipNum2" type="text"
id="PuppyMicrochipNum2" />
</td>
</tr>
</table>

jsFiddle: http://jsfiddle.net/h3XLP/
very common to get jQuery answers but it's really not that comprehensive with standalone JavaScript
note: add the attribute style="display:none;" to the second table
var select = document.getElementsByTagName("select")[0];
select.onchange=function(){
if(select.value=="2"){
document.getElementsByTagName("table")[1].style.display="inline";
}else{
document.getElementsByTagName("table")[1].style.display="none";
}
}
however you should alternatively use below, as you may have more select and table elements in your document
http://jsfiddle.net/h3XLP/1/
var select = document.getElementById("selectnopuppies");
select.onchange=function(){
if(select.value=="2"){
document.getElementById("secondpuppytable").style.display="inline";
}else{
document.getElementById("secondpuppytable").style.display="none";
}
}
<p>Please select number of puppies:</p>
<p>
<select id="selectnopuppies">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1:</p>
<p> </p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName1" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour1" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex1" id="PuppySex1">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td> </td>
</tr>
</table>
<div id="secondpuppytable" style="display:none;">
<p>Puppy 2:</p>
<table width="330" border="0">
<tr>
<td>Name:</td>
<td>
<input type="text" name="PuppyName2" />
</td>
</tr>
<tr>
<td>Colour:</td>
<td>
<input type="text" name="PuppyColour2" />
</td>
</tr>
<tr>
<td>Sex:</td>
<td>
<select name="PuppySex2" id="PuppySex2">
<option value=" "></option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td>
<select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select>
</td>
</tr>
<tr>
<td>
<p>Microchip/DNA Number:</p>
</td>
<td>
<input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" />
</td>
</tr>
</table>
</div>

Given that option 1 should show table 1, option 2 show table 1 and 2, and so on.
Try this:
$('#dropdown').change(function(){
var dropdown = $(this);
var tables = $('.tableSelector');
tables.hide();
tables.slice(0,dropdown.val()).show();
});
Working jsfiddle: http://jsfiddle.net/v5TTz/
I have tagged all tables with a css class "tableSelector", then everytime the dropdown changes value, I show the number of tables corresponding to the current value of the dropdownlist. This solution requires the tables to be positioned in the correct order in the DOM.
However, in my ears, this sounds like a case for templates, like jQuery templates or Hoganjs.

I have modified your code... It's working now... try this...
<html>
<head>
<title>Sample</title>
<script type="text/javascript">
function go()
{
var Count = document.getElementById("selCount").options[document.getElementById("selCount").selectedIndex].value;
if(Count==1)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = 'none';
}
if(Count==2)
{
document.getElementById("Puppy1").style.display = '';
document.getElementById("Puppy2").style.display = '';
}
}
</script>
</head>
<body>
<p>Please select number of puppies:</p>
<p>
<select onchange = "go()" id="selCount">
<option value="1">1</option>
<option value="2">2</option>
</select>
</p>
<form id="form1" name="form1" method="POST" action="<%=MM_editAction%>">
<p>Puppy 1: </p>
<p> </p>
<table width="330" border="0" id="Puppy1">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName1" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour1" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex1" id="PuppySex1">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip1" id="PuppyMicrochip1">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td> </td>
</tr>
</table>
<p>Puppy 2:</p>
<table width="330" border="0" id="Puppy2">
<tr>
<td>Name: </td>
<td><input type="text" name="PuppyName2" /></td>
</tr>
<tr>
<td>Colour: </td>
<td><input type="text" name="PuppyColour2" /></td>
</tr>
<tr>
<td>Sex:</td>
<td><select name="PuppySex2" id="PuppySex2">
<option value=" "> </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
</td>
</tr>
<tr>
<td>Microchip/DNA Profile:</td>
<td><select name="PuppyMicrochip2" id="select2">
<option value="No">No</option>
<option value="Microchip">Microchip</option>
<option value="DNA Profile">DNA Profile</option>
</select></td>
</tr>
<tr>
<td><p>Microchip/DNA Number:</p></td>
<td><input name="PuppyMicrochipNum2" type="text" id="PuppyMicrochipNum2" /></td>
</tr>
</table>
</body>
</html>

You can do something like this:
When you select 1st option, it will show you firSt table and for 2nd it will show you both tables.
$("table").hide();
$("select option").change(function(){
Val = $(this).val();
If(Val ==1) {
$("table")[0].show();
$("table")[1].hide();
} else {
$("table").show();
}
});

A little bit of javascript:
<script>
function showtable(o){
if(o.value==2){document.getElementById('table2').style.display='block';}
else{document.getElementById('table2').style.display='none';}
}
</script>
<p>Please select number of puppies:</p>
<p>
<select onchange="showtable(this)">
<option selected value="1">1</option>
<option value="2">2</option>
</select>
<table id='table2' width="330" border="0" style="display:none">

HTML Changes
<select onchange="showForm(this.options[this.selectedIndex]);">
Why it's needed ?
For listening the select box value change .
<table width="330" border="0" class="puppy">
Added class=puppy attribute for readability . For hiding table element will be generic and error prone.
Javascript Changes
function showForm(option){
//option user has selected.
var val = parseInt(option.value);
//form elements in a document.
var forms = document.getElementsByClassName("puppy");
for(var i=0,total=forms.length;i<total;i++){
var form = forms[i];
var display = form.style.display;
if(i<val && display == "none"){
form.style.display = "block";
}else if(i >= val && display != "none"){
form.style.display = "none";
}
}
}
Live Demo # http://jsfiddle.net/A3eFz/31/

Please try with following example, hope this helps.
<label for ="amount">Please select number of parameter</label><br/>
<select name="amount" id="amount" title="amount">
<option value="00">0</option>
<option value="01">1</option>
<option value="02">2</option>
<option value="03">3</option>
<option value="04">4</option>
<option value="05">5</option>
<option value="06">6</option>
<option value="07">7</option>
<option value="08">8</option>
<option value="09">9</option>
<option value="10">10</option>
</select>
<form name = "AddQuery" id = "AddQuery" method = "POST" action = "submit.php">
<div id="groups">
</div>
<div id="other">
</div>
<input type="submit" value="Submit">
</form>
<script type="text/javascript" src="js/jquery-1.4.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#amount').change(function(){
$('#groups').empty();
var group = '';
var number = parseInt($(this).val());
for(var i=0;i<number;i++){
group += '<div id="group">' +
'<label for="name['+i+']">Name'+i+'</label> '+
'<input name="name'+i+'" type="text" id="name'+i+'" value="">' +
'<label for="type['+i+']">Type'+i+'</label> '+
'<input name="type'+i+'" type="text" id="type'+i+'" value="">' +
'</div>';
}
$('#groups').append(group);
$('#other').empty();
var other = '';
other +='<div id="other"><input type="hidden" name="n" id ="n" value="'+number+'"/></div>';
$('#other').append(other);
});
});
</script>