Solved

Sort Order by form number input

Posted on 2006-06-20
4
429 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

Courses: Start Training Online With Pros, Today

Brush up on the basics or master the advanced techniques required to earn essential industry certifications, with Courses. Enroll in a course and start learning today. Training topics range from Android App Dev to the Xen Virtualization Platform.

Question has a verified solution.

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

Suggested Solutions

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
The task A number given should be formatted for easy reading by separating digits into triads. Format must be made inline via JavaScript, i.e., frameworks / functions are not welcome. So let’s take a number like this “12345678.91¿ and format i…
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…

776 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