code to sort a table

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • xah@xahlee.org

    code to sort a table

    i'm just starting out on javascript.

    can anyone show me how to go about writing a code to sort a table
    column?

    something like the following:

    <table border="1">
    <tr>
    <td>
    <a href="" onClick="">sort me</a>
    </td>
    <tr>
    <tr>
    <td>
    2
    </td>
    <tr>
    <tr>
    <td>
    3
    </td>
    <tr>
    <tr>
    <td>
    1
    </td>
    <tr>
    </table>

    i'm guessing that the code would first read in the table entries as
    documents.table .[1].??, assign it as a array, then sort, then delete
    the table text, then print the table text.

    How to delete the table text?

    eventually this would be for a multi-column and multi-row table (a
    matrix), and each row or column can be clicked to sort, without
    disturbing existing order. The click would act as toggle or reverse
    sorting.

    Xah
    xah@xahlee.org
    ∑ http://xahlee.org/

  • Janwillem Borleffs

    #2
    Re: code to sort a table

    xah@xahlee.org wrote:[color=blue]
    > i'm just starting out on javascript.
    >
    > can anyone show me how to go about writing a code to sort a table
    > column?
    >[/color]

    That's the same as trying to ride the Tour de France the first time you are
    learning to ride a bike.

    Start reading the FAQ (http://jibbering.com/FAQ/) and try something simpler.
    [color=blue]
    > something like the following:
    >
    > <table border="1">
    > <tr>
    > <td>
    > <a href="" onClick="">sort me</a>
    > </td>
    > <tr>
    > <tr>[/color]

    Perhaps you should start to learn some basic HTML too; the above snippet is
    not valid HTML because of the non-closed <tr>.
    [color=blue]
    > i'm guessing that the code would first read in the table entries as
    > documents.table .[1].??, assign it as a array, then sort, then delete
    > the table text, then print the table text.
    >
    > How to delete the table text?
    >[/color]

    Just to give you an idea what's involved, here is an example of how you
    could do it:

    <script type="text/javascript">
    function sortTable() {
    var tds = document.getEle mentsByTagName( 'TD');
    var content = [], val;
    for (var i = 1; i < tds.length; i++) {
    if (val = tds[i].innerHTML.repl ace('/[^\d]+/g','')) {
    content[i - 1] = val;
    }
    }

    content.sort();
    for (var i = 1; i < tds.length; i++) {
    tds[i].innerHTML = content[i - 1];
    }
    }
    </script>
    </head>

    <body>
    <table border="1">
    <tr>
    <td>
    <a href="#" onClick="sortTa ble(); return false">sort me</a>
    [...]
    [color=blue]
    > eventually this would be for a multi-column and multi-row table (a
    > matrix), and each row or column can be clicked to sort, without
    > disturbing existing order. The click would act as toggle or reverse
    > sorting.
    >[/color]

    As said before, learn the language first.


    JW



    Comment

    • Jim Davis

      #3
      Re: code to sort a table


      <xah@xahlee.org > wrote in message
      news:1125138405 .860867.65330@g 49g2000cwa.goog legroups.com...
      i'm just starting out on javascript.

      can anyone show me how to go about writing a code to sort a table
      column?

      I assume you don't really mean to "sort the column" but rather to sort ON
      the table column, right? In other words when somebody clicks your control
      all the rows should move as single units rather than JUST the column data,
      right?

      If so then don't both sorting the column - it's messy and annoying to work
      with the DOM to fetch values and such.

      Instead create a sortable data structure representing your table - probably
      an array of objects. A single function would display the table from this
      structure. Your control would perform the sort on the structure, then call
      the "display" function.

      I've an abstraction object that could help here (long URL):



      It abstracts the processing of an array of objects allowing you to create
      them, add and delete from them, sort them, shuffle the contents, etc.

      There's an example at the bottom of that page that shows you how to create
      and sort a table in this way. You may be able to modifiy to your needs
      easily enough.

      Hope this helps,

      Jim Davis





      Comment

      • ASM

        #4
        Re: code to sort a table

        xah@xahlee.org wrote:[color=blue]
        > i'm just starting out on javascript.[/color]

        sorting a table is not possible if you are starting ...





        --
        Stephane Moriaux et son [moins] vieux Mac

        Comment

        • Jim Davis

          #5
          Re: code to sort a table

          "ASM" <stephanemoriau x.NoAdmin@wanad oo.fr.invalid> wrote in message
          news:4311045e$0 $7862$8fcfb975@ news.wanadoo.fr ...[color=blue]
          > xah@xahlee.org wrote:[color=green]
          >> i'm just starting out on javascript.[/color]
          >
          > sorting a table is not possible if you are starting ...[/color]

          Well... perhaps a better way to say it is that if you end up being able to
          sort a table then you're not starting out anymore. ;^)
          [color=blue]
          > http://www.kryogenix.org/code/browser/sorttable/
          > http://www.mattkruse.com/javascript/...ble/index.html[/color]

          For what it's worth both of those example seem a lot more complex than they
          need to be for the task - although they both, of course, worth just fine.
          Regardless of how complex they are however they both provide decent
          abstractions of that complexity so are useful to beginners.

          Personally I don't see the utility of using the HTML of the table as the
          data storage mechanism. I think thats what makes so many of these solutions
          as complex as they are. Managing and sorting the data seprately from the
          presentation is so very much simpler.

          Jim Davis



          Comment

          • ASM

            #6
            Re: code to sort a table

            Jim Davis wrote:[color=blue]
            > "ASM" <stephanemoriau x.NoAdmin@wanad oo.fr.invalid> wrote in message
            > news:4311045e$0 $7862$8fcfb975@ news.wanadoo.fr ...
            >[color=green]
            >>xah@xahlee.or g wrote:
            >>[color=darkred]
            >>>i'm just starting out on javascript.[/color]
            >>
            >>sorting a table is not possible if you are starting ...[/color]
            >
            >
            > Well... perhaps a better way to say it is that if you end up being able to
            > sort a table then you're not starting out anymore. ;^)[/color]

            :-)
            [color=blue][color=green]
            >>http://www.kryogenix.org/code/browser/sorttable/
            >>http://www.mattkruse.com/javascript/...ble/index.html[/color]
            >
            > For what it's worth both of those example seem a lot more complex than they
            > need to be for the task - although they both, of course, worth just fine.
            > Regardless of how complex they are however they both provide decent
            > abstractions of that complexity so are useful to beginners.
            >
            > Personally I don't see the utility of using the HTML of the table as the
            > data storage mechanism.[/color]

            Question was : how to sort a table
            on my idea the table is pre-existing
            and to sort only on TD.innerHTML or TH is it less complex ?

            Of course if you display a JS matrix in a table via document.write( ) or
            else this way, it is a little simplier :


            I think thats what makes so many of these solutions[color=blue]
            > as complex as they are. Managing and sorting the data seprately from the
            > presentation is so very much simpler.[/color]

            I continue to think that function to sort a matrix is not easy to understand
            could be seen here:
            <http://groups.google.c om/group/fr.comp.lang.ja vascript/msg/1ca86e2439894ee 6?rnum=1>


            --
            Stephane Moriaux et son [moins] vieux Mac

            Comment

            Working...