Solved

Sort Order by form number input

Posted on 2006-06-20
4
431 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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

Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

Question has a verified solution.

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

Suggested Solutions

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

752 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