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

Code:

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>

How to sort html table values using select box

sganesh

Journeyman

arpanmukherjee1

XLr8

sganesh

Journeyman