# How to sort html table values using select box



## sganesh (Jan 9, 2011)

hi ,
In below code,How to sort html  table column values based values selected in select box.
The html content s
<html>
<body>

 Sort by<select>
<option>Name</option>
<option>Surename</option>
<option>Age</option>
</select>

<table  border="1" class=""  width="400">
	<thead>
		<tr>
			<th>Name</th>
			<th>Surename</th>
			<th>Age</th>
		</tr>
	</thead>

	<tbody>
		<tr >
			<td >John1</th>
			<td >Smith1</th>
			<td >30</th>
		</tr>
		<tr >
			<td >John2</th>
			<td >Smith2</th>
			<td >31</th>
		</tr>
		<tr >
			<td >John3</th>
			<td >Smith3</th>
			<td >32</th>
		</tr>
		<tr >
			<td >John4</th>
			<td >Smith4</th>
			<td >33</th>
		</tr>
		<tr >
			<td >John5</th>
			<td >Smith5</th>
			<td >34</th>
		</tr>
		<tr >
			<td >John</th>
			<td >Smith</th>
			<td >35</th>
		</tr>
		<tr >
			<td >John</th>
			<td >Smith</th>
			<td >36</th>
		</tr>
		<tr >
			<td >John</th>
			<td >Smith</th>
                        <td >37</th>
		</tr>
	</tbody>

	</table>

</body>
</html>

Is the problem can be solved in javascript?


----------



## arpanmukherjee1 (Jan 9, 2011)

the answer to ur ques is --  yes.

but first i'd like to give some tips

1. please indent ur code. specially HTML. makes it lot more readable
2. if it was indented always use 
	
	



```
this is CODE tag
```
.
3. please google up the topic before posting it here.
4. if u did look it up. give reference and tell why it didnt solve ur issue

now for ur answer:
Javascript table sorting script
JavaScript Toolbox - Sortable Table

if u want to sort only through the dropdown. extract the function from the script and use it on button click that would be just adjacent to the dropdown


----------



## sganesh (Jan 9, 2011)

thanks for the info
i ve used sortable js found in 
Sortable Table (WebFX)
the code s as follows,But didnt work.
Could someone help me in fixing this issue.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "*www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="*www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>

    <script type="text/javascript" src="js/sortabletable.js"></script>

    <script type="text/javascript">

        var st2 = new SortableTable(document.getElementById("table-2"),
        ["String", "String", "Number"]);


        function alertselected(selectobj){

            if(selectobj.selectedIndex.valueOf()=="1")
            {
                alert(st2.sort(0))

            }

            if(selectobj.selectedIndex.valueOf()=="2")
            {
                   st2.sort(1)    
                }
            if(selectobj.selectedIndex.valueOf()=="3")
            {
              st2.sort(2)    

            }


        }
    </script>




</head>
<body>

<form id="someform">
    <select id="mymenu" size="1" onChange="alertselected(this)">
        <option value="nothing" selected="selected">Select a Sort</option>
        <option>Name</option>
        <option>Surename</option>
        <option>Age</option>
    </select>
</form>
<table  class="sort-table"  cellspacing="1" cellpadding="2" border="1"  id="table-2" width="400">
<thead>
    <tr>
        <th>Name</th>
        <th>Surename</th>
        <th>Age</th>
    </tr>
</thead>

<tbody>
<tr >
    <td >John1</th>
    <td >Smith1</th>
    <td >30</th>
</tr>
<tr >
    <td >John2</th>
    <td >Smith2</th>
    <td >31</th>
</tr>
<tr >
    <td >John3</th>
    <td >Smith3</th>
    <td >32</th>
</tr>
<tr >
    <td >John4</th>
    <td >Smith4</th>
    <td >45</th>
</tr>
<tr >
    <td >John5</th>
    <td >Smith5</th>
    <td >34</th>
</tr>
<tr >
    <td >John</th>
    <td >Smith</th>
    <td >35</th>
</tr>
<tr >
    <td >John</th>
    <td >Smith</th>
    <td >36</th>
</tr>
<tr >
    <td >John</th>
    <td >Smith</th>
    <td >37</th>
</tr>
</tbody>

</table>

</body>
</html>


----------

