Show/ Hide Rows and Columns from Dynamic Tables

anesbbs

Dear all, I just know about this website today & don't know whether this question is already asked before.
I have a dynamic table that contains list of province, queried from database.

    <?php
    $query = "SELECT * FROM province";
    $result = mysql_query($query);?>

    <table border='1'>
    <tr><th>No</th>
        <th>Area Name</th>
        <th>Area (sq km)</th>
        <th>Population</th></tr><?
    while ($data = mysql_fetch_array($result))  {?>
    <tr><td><?=$data['No']?></td>
        <td><?=$data['Province']?></td>
        <td><?=$data['ProvinceArea']?></td>
        <td><?=$data['ProvincePopulation']?></td></tr><? }?>
    </table>

What I need is if I click on one row, let say Province A, some rows will show under Province A that contain list of Cities in Province A.

    <?php
    $query = "SELECT * FROM city";
    $result = mysql_query($query);?>
    while ($data = mysql_fetch_array($result))  {?>
    <tr><td><?=$data['No']?></td>
        <td><?=$data['City']?></td>
        <td><?=$data['CityArea']?></td>
        <td><?=$data['CityPopulation']?></td></tr><? }?>

But list of cities under other Provinces no need to be shown.
Then, when I click again the row of Province A, list of cities under province A will be hide again.

Under the city, there is other list of district from other database table and under district there is list of buildings from other database table.

I need the same feature also happen to city & district, that I can show & hide the list under them by click on the row.

Since the list is from database that contain hundred of thousands records, I hope the script only load data as per click, not one time at the beginning because it will take too much time (AJAX required?).

I also need to do the same thing to column 'Area' & 'Population'.
If I click header 'Area' or 'Population', those two columns will merge become one column with header name changed to 'Data'.
Instead of having two columns for Area & Population, content of each row will be as follow :

No | Area Name |______Data______|
1 | Province A | Area : 232456 sq km |
__|_________| Population : 123.487 |
2 | Province B | Area : 448859 sq km |
__|_________| Population : 234.543 |

When I click again header 'Data', this column will be back to two columns again & no need label 'Area :' & 'Population :' anymore.

Really appreciate your input.