Develop Reference

Get data from specific columns in table when row checked

I need to get from specific table columns in a row. All data should be pushed into an array.
I should take data from each checked row from different columns (1,3,4). Column #4 contains drop-down option and it should take only selected value.
I am having a hard time getting this function to work, it works if I have only one column. I am facing trouble when I am retrieving data from , it retrieves all data from option values, I should get only selected value.
function getData() {
// Enumerate over each checked checkbox
$('input:checked').each(function() {
var row = [];
$(this).closest('tr').find('td:eq(5)').each(function() {
row.push($(this).text());
});
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(row);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
Function displays only data from one column. If I add .'td:eg(6)' I got empty array

#Bruno your case is little different and to get the desired result I have updated your code for button click event & it is as follow.
$("#btnSubmit").click(function(){
var rows = [];
$('input:checked').each(function() {
var row = $(this).parent().parent();
var data = {};
$(row).find("td").each(function(i,obj){
if(i == 1){
data.name = $(this).text();
}
else if(i == 3){
data.age = $(this).text();
}
else if(i == 4){
data.country = $(this).find("select").val();
}
})
rows.push(data);
})
console.log(rows);
})
And before implementing it to your code you can play it in here at JS Fiddle Demo.
In fiddle demo open console [F12] you can see your list of selected row value in an array.
Hope this is what you are looking for.

Here i try your result to get select row dropdwun value.
function getData(){
var rows=[];
// Enumerate over each checked checkbox
$('input:checked').each(function () {
var row = [];
var cnty= $(this).closest('tr').find('td:nth-child(5)').children('select').val();
var fname=$(this).closest('tr').find('td:nth-child(2)').text();
var lname=$(this).closest('tr').find('td:nth-child(3)').text();
var age=$(this).closest('tr').find('td:nth-child(4)').text();
var vals=[fname ,lname, age, cnty];
row.push(vals);
// Add this row to our list of rows
rows.push(row);
//debugger;
});
console.log(rows);
}
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here is how you could have all the selected values on button click. Just iterate over all tr and find select inside and get the value .
function getData(){
$("tr").each(function() {
if($(this).find("select")){
console.log($(this).find("select").val())
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table >
<tr>
<th>#</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="1"></td>
<td>Jill</td>
<td>Smith</td>
<td>20</td>
<td>
<select class="select-cls" id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="2"></td>
<td>Eve</td>
<td>Jackson</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
<tr>
<td><input type="checkbox" id="checkbox" value="3"></td>
<td>Amanda</td>
<td>Jac</td>
<td>14</td>
<td>
<select id="country">
<option value='1'>Germany</option>
<option value='2'>England</option>
<option value='3'>Croatia</option>
<option value='4'>USA</option>
</select>
</td>
</tr>
</table>
<button type="button" onclick="getData()">Submit</button>

how to multiply and sum form values in real time using jquery/javascript

Hello Stackoverflow Coders. I downloaded this code online and now wish to add quantity to each product.
what I want is to be able to multiple each product price by the quantity that is whenever a user selects
quantity of products, it will be multiply by the price and displays results each and then sum all the calculations if
depending on the number of product item selected. thanks
source: http://viralpatel.net/blogs/sum-html-textbox-values-using-jquery-javascript/
<html>
<head>
<title>Sum Html Textbox Values using jQuery/JavaScript</title>
<style>
body {
font-family: sans-serif;
}
#summation {
font-size: 18px;
font-weight: bold;
color:#174C68;
}
.txt {
background-color: #FEFFB0;
font-weight: bold;
text-align: right;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt" value="500" /></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt" value="250"/></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt" value="400"/></td>
<td><select name="qty" class="txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
<script>
$(document).ready(function(){
//iterate through each textboxes and add keyup
//handler to trigger sum event
$(".txt").each(function() {
$(this).keyup(function(){
calculateSum();
});
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if(!isNaN(this.value) && this.value.length!=0) {
sum += parseFloat(this.value);
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
</script>
</body>
</html>

This requires some minor changes in your html and js like below
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input class="txt" type="text" name="txt" value="500" /></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input class="txt" type="text" name="txt" value="250"/></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input class="txt" type="text" name="txt" value="400"/></td>
<td>
<select name="qty" class="qty-txt" />
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
JS Code:
$(document).ready(function() {
$(".txt").keyup(function() {
calculateSum();
});
$('.qty-txt').on('change', function() {
calculateSum();
});
});
function calculateSum() {
var sum = 0;
//iterate through each textboxes and add the values
$(".txt").each(function() {
//add only if the value is number
if (!isNaN(this.value) && this.value.length != 0) {
//check cooresponding quantity
var qty = $(this).parents('tr').find('.qty-txt').val();
sum += (parseFloat(this.value) * parseInt(qty, 10));
}
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
}
Link to fiddle.

It would look more like this:
Using the <select> id to find the associated price.
$("select").on("change",function(){
var sum = 0;
//iterate through each select and multiply the values
$("select").each(function(){
thisID = $(this).attr("id").replace("-qty","-price");
sum = sum + (parseInt($(this).val()) * parseInt($("#"+thisID).val()) );
});
//.toFixed() method will roundoff the final sum to 2 decimal places
$("#sum").html(sum.toFixed(2));
});
With as few changes to the HTML:
<table width="300px" border="1" style="border-collapse:collapse;background-color:#E8DCFF">
<th>no</th>
<th>product</th>
<th>price</th>
<th>quantity</th>
<tr>
<td width="40px">1</td>
<td>Butter</td>
<td><input type="text" id="butter-price" class="txt" value="500"></td>
<td><select id="butter-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>2</td>
<td>Cheese</td>
<td><input type="text" id="cheese-price" class="txt" value="250"></td>
<td><select id="cheese-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr>
<td>3</td>
<td>Eggs</td>
<td><input type="text" id="eggs-price" class="txt" value="400"></td>
<td><select id="eggs-qty" class="txt">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select></td>
</tr>
<tr id="summation">
<td> </td>
<td align="right">Sum :</td>
<td align="center"><span id="sum">0</span></td>
</tr>
</table>
See in Fiddle : https://jsfiddle.net/Bes7weB/544vun0r/

how to select values in the dropdown box

this is my code .
if i select tamilnadu , i must get chennai.
if i select kerla i must get kochi.
how to get the values if i submit.
enter code here
<td align='center' >STATE:</td>
<td> <select name ='state' onchange="showData()">
<option value="0">Select</option>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</td>
</tr>
<tr> <td> </td> </tr>
<tr>
<td align='center' name ='city'>city:</td>
<td> <select>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore<option>
</tr>

You can go with the correct tag formation like this:
jQuery
$('#state').change(function() {
$('#res').html($('#city option').eq($('#state option:selected').index()).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>
Javascript:
function listResult() {
var e = document.getElementById("state");
document.getElementById("res").innerHTML = document.getElementById("city").options[e.selectedIndex].value
}
<tr>
<td align='center'>STATE:</td>
<td>
<select name='state' id='state' onchange='listResult()'>
<option value="TAMILNADU">TAMILNADU</option>
<option value="KERLA">KERLA</option>
<option value="KARNATAKA">KARNATAKA</option>
</select>
</td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td align='center' name='city'>city:</td>
<td>
<select name='city' id='city'>
<option id='chennai'>chennai</option>
<option id='kochi'>kochi</option>
<option id='banglore'>banglore
<option>
</select>
</tr>
<br>
<br>RESULT : <span id='res'></span>

give space between particular <td> elements in a table

i have two html table's inside a main table. I have to give the space between td of first table so that Heading one should be on top of Element1 and text box and Heading two should be on top of Element2 and select lists which are available in other table. Please suggest how can i achieve this, do i need to modify the html table structure.
Please find the fiddle:https://jsfiddle.net/x5tLdbz4/1/
Below is the css code:
td:nth-child(1) {
padding-right: 90px;
}
HTML code:
<table>
<table>
<tr>
<td class="hone" class="more-padding-on-right">
Heading One
</td>
<td class="htwo">
Heading Two
</td>
</tr>
</table>
<table>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
</table>

I would merge the two tables into one, with colspan values.
Another correction, it should be valign="middle" not center.
http://jsfiddle.net/w8kvm0d9/
.hone, .htwo {
background-color: #EEEEEE;
font-weight:bold;
color:red;
font-size:12px;
height:15px;
}
td {
border: 1px solid silver;
}
td:nth-child(2) {
border: 0;
width: 80px;
}
td select {
vertical-align: top;
}
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td> </td>
<td class="htwo" colspan="3">Heading Two</td>
</tr>
<tr>
<td valign="top">Element1:<input id="myTest" type="text" value=""/></td>
<td> </td>
<td valign="top">
Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="middle">>></td>
<td valign="top">
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>

I would recommend putting everything into a single table. When you have two separate tables but you want to the columns to align you'll find it nearly impossible to ensure that they always do (especially when a user resizes the browser window). You could also add <thead> and <tbody> tags to distinguish between the header rows and body rows. Also, since you've got 3 columns in the second table you'll need to use the colspan attribute for the second column of the header to tell it span 2 columns, thus allowing the columns to fit in (or, if I didn't understand the alignment you want you might need the colspan on the first header column instaed).
<table>
<thead>
<tr>
<th class="hone" class="more-padding-on-right">
Heading One
</th>
<th class="htwo" colspan="2">
Heading Two
</th>
</tr>
</thead>
<tbody>
<tr valign="top">
<td> Element1:<input id="myTest" type="text" value=""> </td>
<td>
Element2:<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>

you can use one table structure and it'll look something like this:
http://jsfiddle.net/swm53ran/267/
<table>
<thead>
<tr>
<th>Heading 1</th>
<th>Heading 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Element 1<input type="text"/>
</td>
<td>
Element 2
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
>>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</tbody>
</table>

A better way (if sticking with tables) is to use a single table for this:
<table>
<tr>
<td class="hone" class="more-padding-on-right">Heading One</td>
<td class="htwo">Heading Two</td>
<td></td>
<td class="hthree">Heading Three</td>
</tr>
<tr valign="top">
<td>Element1:
<input id="myTest" type="text" value="">
</td>
<td>Element2:
<SELECT id="one" size="10" multiple>
<OPTION value="a">AAA</OPTION>
<OPTION value="b">BB</OPTION>
<OPTION value="c">CCC</OPTION>
</SELECT>
</td>
<td valign="center">
>>
</td>
<td>
<SELECT id="two" size="10" multiple>
<OPTION value="a">FF</OPTION>
<OPTION value="b">GG</OPTION>
<OPTION value="c">BHH</OPTION>
</SELECT>
</td>
</tr>
</table>
https://jsfiddle.net/rcj1xgur/3/

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>