Go Premium for a chance to win a PS4. Enter to Win

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 435
  • Last Modified:

Sort Order by form number input

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
mrslate1
Asked:
mrslate1
  • 2
  • 2
1 Solution
 
mrslate1Author Commented:
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
 
Jens FiedererCommented:
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
 
mrslate1Author Commented:
Thaniks a lot! This is exactly what I was looking for. Simple easy code.
0
 
Jens FiedererCommented:
My pleasure, thanks for the "A"!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 2
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now