display dynamic table rows in the same page

[glotsa]

There are three drop down boxes: shopname, country and sell at the top of a page.(initial value of the above drop down boxes is set to "ALL")
Below the drop down boxs, there is a table for displaying all records
i.e.
the following is the table:(retrieved from database)
shopname country sell
***************************
shopABC HK stationery
shopABC US flowers
shopABC BK furniture
shop123 HK flowers
shop123 HK fruit
(i have successfully got all the records from database into this jsp, and have put all the result set to a two-dimensional array )

what i want to do is: when user click the drop-down box "shopname" with value "shopABC", then the table will be filtered and displayed as
shopname country sell
***************************
shopABC HK stationery
shopABC US flowers
shopABC BK furniture

if user click the drop-down box "country" with value "HK", then the table will be displayed as
shopname country sell
***************************
shopABC HK stationery
shop123 HK flowers
shop123 HK fruit

if user click the drop-down box with both "shopname" and "country" with value "shop123" and "HK"
then the table will be displayed as
shopname country sell
***************************
shop123 HK flowers
shop123 HK fruit

How can i do that??

[khalidali63]

Here is how you can do this.
in the select box's onchange put a function say
process()

<select name="listbox" onchange="process">

and then in the Javascript tags
function process(){
var table = document.createElement("table")
and on the same line create tr and td's and give them values using document.createTextNode("value")

Hope this helps

Khalid
}

[glotsa]

thanks for your suggestion, but in fact , the following table is generated from database result set, i have put all the result set into a two dimensional arrayin class DetailsDAO(), so that i can get the array by calling class DetailsDAO()

how can i update the this table by the user selection?

<table id="record">
<tr>
<td>shop name</td>
<td>country</td>
<td>selling</td>
</tr>
<% DetailsDAO detailsdao=new DetailsDAO();
String[][] result=detailsdao.getRecord();
for (int i=0;i<NoOfRecord;i++){%>
<tr>
<td>result[i][1]</td>
<td>result[i][2]</td>
<td>result[i][3]</td>
</tr>
<%}%>
</table>

[khalidali63]

exactly as I suggested above,since you have id for table use documetn.getElementById() and update the info in the tr and tds/creae new values and append

You may have to read on how to work with dom methods.

http://cgi.din.or.jp/~hagi3/JavaScript/Mozilla/SampleList.cgi?fmt=html

Khalid

[glotsa]

how do i create table rows in the javascript function??
can u give me some simple examples??

[khalidali63]

This should help you.

http://www.mozilla.org/docs/dom/samples/dynatable-light/index.html

Cheers

Khalid