Solved

Sort Order by form number input

Posted on 2006-06-20
4
428 Views
Last Modified: 2008-02-01
I am trying to create a HTML form in which the user can sort the table rows by adding a 1-5 (for example) in a text box in each row, then hit a button to re-sort the rows by lowest to highest number input.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
</head>

<body>
<table width="150" border="0" cellspacing="2" cellpadding="2" name="rsTable" id=rsTable>

<tr  bgcolor="#F8F8F8">
    <td><input type="text" value="5" size="1" class="inputs"></td>
      <td>line 1</td>
      
</tr>
<tr>
    <td><input type="text" value="3" size="1" class="inputs"></td>
            <td>line 2</td>
</tr>
<tr  bgcolor="#F8F8F8">
    <td><input type="text" value="2" size="1" class="inputs"></td>
            <td>line 3</td>
</tr>
<tr>
    <td><input type="text" value="1" size="1" class="inputs"></td>
            <td>line 4</td>
</tr>
<tr>
    <td><input type="text" value="4" size="1" class="inputs"></td>
            <td>line 5</td>
</tr>
<tr>
<td><a href="#">Sort</a></td>
</tr>
</table>


</body>
</html>

I have tried some JavaScript that is close but I can't seem to do it where  a user can input the number themselves to sort the rows.

Can anyone help?
0
Comment
Question by:mrslate1
  • 2
  • 2
4 Comments
 

Author Comment

by:mrslate1
ID: 16944697
Maybe I need to clairify. What I am actually trying to let the user do is Rank the rows from 1-5 using a typed in number, then hitting "sort" will put the table rows in that order from 1 to 5.
0
 
LVL 23

Accepted Solution

by:
Jens Fiederer earned 500 total points
ID: 16944891
If you don't feel too soiled using a bubble sort:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
     <title>Untitled</title>
<script type=text/javascript>
function dosort()
{
      var tbody = document.getElementById("rsTable").firstChild;
      var rows = tbody.rows;
      var swapped = 1
      while (swapped) {
            swapped = 0;
            for (var i = 0; i < rows.length - 1; i++) {
                  if (rows[i].cells[0].firstChild.value - 0 > 
                        rows[i+1].cells[0].firstChild.value - 0 ) {
                        swapped = 1;
                        var x = tbody.removeChild(rows[i+1]);
                        tbody.insertBefore(x, rows[i]);
                  }
            }
      }
}
</script>
</head>

<body>
<table width="150" border="0" cellspacing="2" cellpadding="2" name="rsTable" id=rsTable>

<tr  bgcolor="#F8F8F8">
    <td><input type="text" value="5" size="1" class="inputs"></td>
     <td>line 1</td>
     
</tr>
<tr>
    <td><input type="text" value="3" size="1" class="inputs"></td>
          <td>line 2</td>
</tr>
<tr  bgcolor="#F8F8F8">
    <td><input type="text" value="2" size="1" class="inputs"></td>
          <td>line 3</td>
</tr>
<tr>
    <td><input type="text" value="1" size="1" class="inputs"></td>
          <td>line 4</td>
</tr>
<tr>
    <td><input type="text" value="4" size="1" class="inputs"></td>
          <td>line 5</td>
</tr>
<tr>
<td><a onclick="dosort()" href="#">Sort</a></td>
</tr>
</table>


</body>
</html>

0
 

Author Comment

by:mrslate1
ID: 16944968
Thaniks a lot! This is exactly what I was looking for. Simple easy code.
0
 
LVL 23

Expert Comment

by:Jens Fiederer
ID: 16945051
My pleasure, thanks for the "A"!
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

861 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now